Digital Pro WooCommerce product list widget

[kmanton]

Hi everyone. This is my first post here, but I have been very grateful for what I've learned from reading this forum. I'm hoping someone here can help me with this.

I'm developing a website (Digital Pro theme) that uses a WooCommerce product list widget in the sidebar on its pages:

http://howtowri.managedwp.com.au/how-to-write-selection-criteria/

Is there a way to move the product image to the left of the product name in this widget?

If anyone can help, I'd be most appreciative.

Kate

http://howtowri.managedwp.com.au/how-to-write-selection-criteria/

[Victor Font]

The image location is controlled by the float: right in .woocommerce ul.product_list_widget li img in woocommerce.css. Since this is a plugin style sheet, you can't change it there. What you need to do is override it in your child theme's style.css. However, the WooCommerce style sheets typically load after the child theme's style.css, gibing them precedent in the browser. To override WooCommerce then, you have to change the load order of the style sheets so the child theme's loads last. This will help you: https://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

If you do this correctly, the following code, when added to style.css will orverride WooCommerce:

.woocommerce ul.product_list_widget li img {
    float: left;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[kmanton]

Hi Victor,
Thank you so much for your reply. I found that there is a digital-woocommerce.css within the Digital Pro theme, so I added the float to that and it works well. The only thing I can't figure out is why the floated image is not aligning with the adjacent text at the top, as I thought float: left sent it to the top-left. If you have any ideas, I'd be grateful, but I don't want to put you out.
Thanks again, Kate

[Victor Font]

The image is aligning with the text. You have a white border in the image that presents the illusion that it is not in alignment. Look at the image by itself:

If you want the top line of the rectangle to align with the top, you have to give it a negative margin-top of about 8px. margin-top: -8px.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[kmanton]

Thank you again! I forgot that I'd put the white border on those temporary images (for another, now defunct reason) - I should have checked. All fixed now.

[Author]

Posts