-
Posts
-
Hi, I’m trying to make some small modifications to a WooCommerce shop page, but I’m having a lot of issues. I’m famillar with CSS, but I can’t seem to find the right way to modify the page. I attached a screenshot of the simple things I’m trying to do.
But in summary:
–Need to expand the width (possibly to full width) so that it can display more products and not have such large margins on large screens.
–Need to expand so that I can add the sidebar menu of categories. Currently, this takes up too much room since the margins are so wide, so I don’t even have the categories widget activated. I’d like it so it is visible, but doesn’t take up much room from the projects
–I need to make the title text of the products much smaller – I really want the focus to be on the images.
4.I’d like to remove that gray border from around the products.Hey flylanddesigns,
Thank you for the mockup, to make the page full width, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top #main .template-shop .container:first-child { max-width: 1800px !important; padding: 0px !important; } #top #main .template-shop .container:first-child .page-thumb img { width: 100% !important; } #top #main .template-shop .container:first-child div .products .product { width: 14.25% !important; }this should give you room for two sidebars, please add them so we can make final adjustments.
If I could suggest making the sidebars hidden on tablet and smaller screens, because it will be easier to look at, and be easier to navigate.To make the post titles smaller, try this css & adjust to suit:
h2.woocommerce-loop-product__title { font-size: 14px !important; }To remove the grid border, try this css:
.main_color div { border-color: transparent !important; }Best regards,
Mike
- The topic ‘Modifications to WooCommerce shop page in Enfold’ is closed to new replies.