Category: Woo

Reorder WooCommerce Product Title and Price

Reorder WooCommerce Product Title and Price

If you've ever wanted to move your product title (or price) above your product images this CSS will help you do that. It affects the shop module, default shop page, and related products. css code The CSS can go in your child stylesheet OR appearance >...

Customize the WooCommerce Shop Grid (Look 2)

Customize the WooCommerce Shop Grid (Look 2)

This tutorial provides some CSS code for customizing your WooCommerce shop/product grid. The first look is here and I just wanted to add another option. If you're using my code for the single product pages this look would tie in well with the bordered...

Customize WooCommerce Cart, Checkout, and Account Pages

Customize WooCommerce Cart, Checkout, and Account Pages

This tutorial provides some CSS code for changing your WooCommerce cart, checkout, and account pages to match the rest of your site and customize it a bit. I've added comments to the code to help guide what changes what but you might find it a bit...

Make WooCommerce Product Images Fullwidth

Make WooCommerce Product Images Fullwidth

This is a quick CSS snippet that will make the top part of your WooCommerce single product pages into one column instead of two, making the images and pricing info fullwidth. If you want more focus on your images than the two-column layout allows this may...

Divi + WooCommerce Single Product Page CSS Styling

Divi + WooCommerce Single Product Page CSS Styling

If you'd like to style your WooCommerce single product pages on your Divi store to match the rest of your site these code snippets will help get you started. Use the provided CSS and tweak to your needs to achieve a look you like, all on your own! The...

Capitalize WooCommerce Headings and Buttons

Capitalize WooCommerce Headings and Buttons

With these CSS code snippets you can change the Woo headings and buttons to be capitalized — if it bugs you like it bugs me that they're not There are a couple cases where technically all the words shouldn't be capitalized (like the shipping address...

WooCommerce Shop Grid CSS Styling (Look 1)

WooCommerce Shop Grid CSS Styling (Look 1)

Would you like to customize your Woo shop grid but you're just not sure how to get the code to do it? If you understand some basic CSS (the basics are easy, I promise!) you can use my code snippets to customize your Divi / WooCommerce shop grid to change...

Remove Divi Hover Arrows from All WooCommerce Buttons

Remove Divi Hover Arrows from All WooCommerce Buttons

Do you use the Divi hover icons (like the default arrows) on your buttons throughout your Divi online store but find that on some of the WooCommerce pages those icons don't always look like they should when you hover? Examples: Also notice how the 'update...