Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #170443


    I’m extremely happy with the Enfold theme – superb(!) job, guys.

    The only thing I’m really struggling with is the WooCommerce page layout. Is there a section in the WordPress Admin where I can modify the Shop layout? Or do I need to dig into PHP and CSS?
    (If it’s PHP and CSS: Which files do I need to modify?)

    To give you a couple of examples for what I would like to do:

    1) On the main Shop page: Remove the “Sort by…” and “Display … products per page” boxes at the top
    2) On the Product page: Remove the “Additional Information” and/or “Review” Tabs underneath the price section
    3) On the Product page: Don’t display the “Related Products” at the bottom of the page

    There’s some more things I’d like to modify, but the above three should get me started in trying to understand things a bit better…

    Thank you once again for a great theme, and for the outstanding support!


    Hi BelIblis!

    Please add following code to Quick CSS in Enfold theme options

    .product-sorting, .product .woocommerce-tabs, .related.products { display: none; }

    This will remove all three. Modifying WooCommerce temlpates could be complicated. If your other questions are CSS related as well, feel free to post them any time :)



    Thanks, Yigit.

    Another thing would be: How can I make the product picture larger?

    And how can I remove the “double arrow” rollover behaviour on the product picture. (The double arrows look nice, but I’d like to remove them because I have a plug-in installed which shows a rollover magnifying glass. Unfortunately that magnifying glass gets disabled by the double-arrow rollover).



    Can you post the link to your website?



    Website is in development on localhost at the moment. But by “double arrow” I mean the same as here on the forum page:
    On the top you have a banner for your Enfold template. And when I hover over that, the banner gets lighter/dimmed and an animated arrow in a blue circle appears…



    Please add following code to Quick CSS as well to remove it

    .image-overlay  { display: none!important; }



    Cool, thanks.

    Just out of interest: Is there a separate CSS for the woocommerce side of things? Ideally, I’d like to customise the colour scheme (and maybe the fonts) for my Shopfront, to make them different from the rest of the site.

    Is that possible?



    Yes it is possible, you can add .woocommerce class and css changes will be effective only on woocommerce pages

    Best regards,


    That’s fantastic!

    So, to take the .woocommerce classes even further:
    Would it be possible to display the breadcrumb only in the Woocommerce Shop but NOT on the rest of the website?

    I know I can turn the header on & off. But ideally, I would like to keep the header in my “Portfolio” section, and only turn the breadcrumbs off.
    And in the Shop: have the header AND the breadcrumb.

    (This is something that has been bugging me quite a bit, and would be a suggestion for a feature request, as I think this makes the entire theme even MORE flexible than it already is – at least for visual artists that use your theme as a portfolio & shop).

    Once again: Thanks for the outstanding support here!



    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .woocommerce .title_container .breadcrumb { display: block; }
    .title_container .breadcrumb { display: none; }



    That’s great – Thanks Yigit!

    It works great. But unfortunately, it also removes the Bradcrumb from the Cart and Checkout-Sections :(
    And also in the “My Account” and my “Terms & Conditions” page. So basically, on every Woocommerce page that is NOT a product page…

    Is there a way to re-enable breadcrumbs in those sections?

    • This reply was modified 4 years ago by  BelIblis.
    • This reply was modified 4 years ago by  BelIblis.


    Please use this instead:

    .title_container .breadcrumb { display: none; }
    .woocommerce .title_container .breadcrumb { display: block; }

    Make sure that they are in order.

    Best regards,


    Thanks, Ismael. Unfortunately this didn’t change anything in the WooCommerce section:
    Breadcrums are visible only on the Category and Product pages, but not in the Checkout or Cart pages.

    I’d like to enable breadcrumbs especially on the Cart and Checkout pages, so that customers can conveniently go back to the Shop if they would like to more products.



    Please try adding following code as well

    .woocommerce-cart .title_container .breadcrumb, .woocommerce-checkout .title_container .breadcrumb { display: block!important; }


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

The topic ‘WooCommerce – General Question for modifying shop module’ is closed to new replies.