Last Updated on July 3, 2019
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 > additional CSS OR Divi theme options > custom CSS box.
/***********************************************/
/************* REORDER WOO ELEMENTS ************/
/***********************************************/
/*** SINGLE ITEM ***/
.woocommerce ul.products li.product a {
display: flex; /* flexbox allows us to move elements around */
flex-direction: column;
}
/*** PRODUCT IMAGE ***/
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
margin: 0 !important; /* this is needed to compensate for using flex above */
}
/*** PRODUCT TITLE ***/
h2.woocommerce-loop-product__title,
.related h2.woocommerce-loop-product__title {
order: -1; /* -1 is like first/top */
}
/*** PRICE ***/
.woocommerce ul.products li.product .price {
order: 0; /* 0 is like second/middle */
}
/*** STAR RATING ***/
.woocommerce ul.products li.product .star-rating {
order: 1; /* 1 is like third/bottom */
}
/*** SALE BADGE ***/
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
top: 15% !important; /* moves the badge so it doesn't cover the top element */
}
Notes:
- You just need to play with the order number in the CSS to move them around. You can add more styling (font sizes, colors) using the same selectors (I have more help on that here and here if you prefer to code it), or of course you can just use the Divi customizer and module settings.
- This code is only using WooCommerce classes so it can be used on non-Divi themes, but most likely it will need adjustments.
Thanks for this, does exactly what I need with a few adjustments!
Cheers
Thanks Lana!
Hi may i know how to bold the title in the woocommerce category?
Hi Hurab 🙂 I’m not sure what title you mean exactly but this will bold product categories everywhere:
.woocommerce span.posted_in,
.woocommerce span.posted_in a {
font-weight: bold;
}
Hi Thank yo so much Leslie. one more thing i want t o write my description under the title and want it in smaller font size. could you please guide me how to do it
you can check the link https://greencotton.com.my/product-category/non-woven-bags-felt-products/
i want a lil description under the title.
Thank you again
Hmm I’m sorry but that requires more than just CSS but you can try this if you’re comfortable messing with a child theme:
https://stackoverflow.com/questions/48073775/add-shortened-description-under-the-product-title-in-woocommerce-archive-pages
Excelente Justo lo que necesivaba
Gracias Jose! 🙂
The code is for catalog page, please give the code of single product page.