Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #208591

    hi there, i just switched to ENFOLD since my plug-in WooCommerce German Market seems to work best with this theme.
    After changing the theme i have trouble adjusting some details, especially on the woocommerce product page.
    I have attached a screen shot for better understanding (i am referring to the circled sections)

    1) How can i get rid of the image side bar on product image? also the link thats activated – i just want to have the product in its original size (400×400)
    2) How can i change the font sizes in the product description (Product name too big, price to small,)
    3) how can i change the font color on button only (a darker color like grey or black would go better with the yellow)
    4) How can i change the padding at the border of ‘product categories’ and ‘similar products’ (middle of the page) ?
    5) I havent found the styling option for ‘Ähnliche produkte’ (which means ‘similar products) – does this come from woocommerce? Its a different yellow that i did set up in the styling panel.. any idea where to change that?
    6) its weird that the products on the bottom (catalogue thumbs i guess) are not sharp. its the same size, quality as the main product in the upper half of the page and yet its somehow blurry. Any idea why this is happening?
    This is the image size set up in woocommerce:
    catalogue: 80×80
    single product: 400×400 (original size)
    thumbs: 120×120

    i searched the forum but did not find the exact answers – thats why i decided to put this together in one topic, since its happening on one single page.
    hope you can help!
    thanks so much in advance
    Pedro

    Shop Page

    #208834

    Hey aovivo!

    Please do the following:

    1.) Add this on your custom.css or Quick CSS:

    .woocommerce-main-image.zoom {
    overflow: hidden;
    }

    2.) Change the product title using this:

    .product_title.entry-title {
    font-size: 13px;
    }

    And the price font size with this:

    #top .price span, #top del, #top ins {
    font-size: 17px;
    line-height: 24px;
    }

    3.) Change the button color with this:

    .main_color .add_to_cart_button.button.product_type_simple {
    background-color: red;
    }

    4.) Increase the bottom margin of categories using this:

    .product_meta {
    margin-bottom: 20px;
    }

    5.) Change the upsells or you may also like products using this:

    #top .upsells.products h2 {
    font-size: 15px;
    color: red;
    }

    6.) It should be using the shop catalog image size which 450×450. Please regenerate the thumbnails using this plugin: http://wordpress.org/plugins/regenerate-thumbnails/

    Regards,
    Ismael

    #209040

    Hi there – thanks for the quick response.
    unfortunately some of the CSS do not seem to work.

    1) not working. the tabs in the picture are still there. however – i used the thumbnail regenerator – which made my catalogue images look even more blurry. so i resized the images to 450 with a photoeditor – uploaded it – nothing changed. :-(
    also – how can i get rid of the lighbox (open product image in new window) of the product image?

    2) perfect – thats what i was looking for!
    3) same here – top!
    4) this works too – thanks for that
    5) unfortunately this did not change anything – any other idea?

    is there any information how i can set up the correct image size for catalogue image, product images, thumbnail images? what should i consider in the woocommerce settings?!

    i have tested the images with a standard theme – everything shows up perfect! no tab/sidebars, no blurred images… i have no idea why this is happening…

    #209634

    Hey!

    Please post the actual link to the website and the product. We would like to inspect to give you a better css solution.

    Best regards,
    Ismael

    #209869
    This reply has been marked as private.
    #209894

    Hi!

    1.) Add this on Quick CSS:

    .four.units.single-product-main-image.alpha {
    overflow: hidden;
    }

    2.) Change the price and price per unit font using this:

    #top .price span, #top del, #top ins {
    font-size: 12px;
    line-height: 24px;
    }

    3.) The code above will change it too.

    4.) You can change the color of the related products title using this:

    .alternate_color .related.products h2 {
    color: blue;
    }

    Cheers!
    Ismael

    #209897

    wow – that was fast – THANK YOU!
    everything worked fine!!
    just two more:
    1) how to deactivate the link behind the product image?
    2) cant i seperately change the pprice font and the font for ‘19% tax inkl.)?

    thanks!!

    #209931

    Hi!

    1.) Add this on Quick CSS:

    .four.units.single-product-main-image.alpha .images a {
    pointer-events: none;
    }

    2.) You can change the font of the tax rate using this:

    .woocommerce-de_price_taxrate {
    font-size: 11px !important;
    font-family: Arial;
    }

    Best regards,
    Ismael

    #209979

    Bulls eye, mate!!
    that is fantastic – it looks great!!

    best theme, best code, best team! thank you all!!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘different display problems in one shop page’ is closed to new replies.