Tagged: ecommerce, modification, woocommerce
-
AuthorPosts
-
October 4, 2013 at 3:27 pm #170443
Hi,
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 pageThere’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!
October 6, 2013 at 5:09 pm #171214Hi 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 :)
Cheers!
YigitOctober 6, 2013 at 6:52 pm #171242Thanks, 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).
October 6, 2013 at 7:03 pm #171244October 6, 2013 at 7:20 pm #171249Website 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…October 6, 2013 at 7:34 pm #171259Hey!
Please add following code to Quick CSS as well to remove it
.image-overlay { display: none!important; }
Regards,
YigitOctober 7, 2013 at 11:29 am #171551Cool, 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?
October 7, 2013 at 12:17 pm #171562Hello!
Yes it is possible, you can add .woocommerce class and css changes will be effective only on woocommerce pages
Best regards,
YigitOctober 9, 2013 at 12:05 pm #172961That’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!
October 9, 2013 at 6:33 pm #173175Hey!
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; }
Regards,
YigitOctober 13, 2013 at 2:20 pm #174764That’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 11 years, 1 month ago by BelIblis.
October 14, 2013 at 4:56 am #174941Hey!
Please use this instead:
.title_container .breadcrumb { display: none; } .woocommerce .title_container .breadcrumb { display: block; }
Make sure that they are in order.
Best regards,
IsmaelOctober 21, 2013 at 3:45 pm #178455Thanks, 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.
October 21, 2013 at 11:28 pm #178705Hey!
Please try adding following code as well
.woocommerce-cart .title_container .breadcrumb, .woocommerce-checkout .title_container .breadcrumb { display: block!important; }
Regards,
Yigit -
AuthorPosts
- The topic ‘WooCommerce – General Question for modifying shop module’ is closed to new replies.