Modifying Woocommerce CSS and Structure

Support
#1

Hi!

I’m getting started with X Theme and Woocommerce together for the first time. Currently, the theme styles are dictating the look of the Woocommerce pages, naturally. The question is: what is the best way to safely make adjustments to the CSS specific to Woocommerce pages. How about changes to the structure? For instance, currently, using (PRO), the default behavior on the main Woocommerce shop page, displays the “Add to Cart” button upon hovering over any item. This is not my preference. If I wanted a “Add to Cart” button, I would like it underneath like in other implementations. Plus I’ve seen other things like variations also come up underneath. Not sure if this is a default behavior if you have variations.

Any guidance on this matter will help tremendously!

Thanks!

#2

I’m afraid that for structure changes you’ll need a template change.

#3

Thank you for that reply.

By template change, do you mean another theme style offered by X, i.e Renew, Integrity, etc? Anyway to apply another template to Woocommerce specific pages?

Thanks again.

#4

No, I relly mean diggin’ into the .php code of the template. Those are theme specific. First you’ll have to setup a Child theme and then you need to find someone who understands making a template change ;)) (I don’t).

#5

Woocommerce is a pain in the butt to modify. See what you can do through changing your css first-- adding to the custom css box of X or set up a child theme and add to style.css.

#6

Woocommerce is no harder to modify than any theme. Download woo, open the templates folder, and find the files you want to customize. All of them have a comment block at the top telling you how to override it in a child theme.

And since it’s all in a child theme, all you have to do is delete the file if you mess up.

#7

Hello There,

You can start modifying your WooCommerce template pages by overriding the WooCommerce template. you will have to create a woocommerce folder in your child theme and place your template overrides in this folder. For more detailed information, please check out this documentation: https://docs.woocommerce.com/document/template-structure/

Thanks for chiming in guys! We really appreciate exchanging ideas with other users.

Cheers.

#8

Thank you RueNel!

I was waiting for a staff member to chime in specifically, not that everyone else’s comments weren’t welcome. I do appreciate everyone’s assistance.

Your specific instructions on template modification does help, though I believe my concern relates more to the CSS. For instance, on the main shop main, when you hover over a product, you see the add to cart button. This functionality is caused by Integrity’s styles. So is the small thumbnails that appear on the top-right of the image container on the single product page. My question is: how can you safely achieve a different look for WooCommerce while still retaining the style from the selected stack on other pages. For example, how would I place the add to cart button permanently under the photo on the shop page and put the thumbnails underneath the main photo on the single product page. This is a common configuration and I like it more than this setup.

I can hack away at the CSS but I’m trying to figure out the best practices without screwing up responsiveness etc.

Thanks again!

#9

@kgpthemex - just a heads up that this is the Conversation forum which is not for official support as outlined above. If you are looking for support in the future, please post in the Support Forum.

Thank-you!

#10

I apologize!

It initially wasn’t meant to be a support question but I guess it turned into one.

I have opened a topic in the support section.

Thank you!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.