Broken layout around thumbnail in confirmation email
-
Hi there
This is fairly complex, so kindly read carefully and bear with me.
I am the MD of popWeb, which has around 60 websites under management, with around 20 of them using Woocommerce. I’m well versed with how WC works and this issue is specific to one particular client which is a bit different from the others in that it uses a plugin called FANCY PRODUCT DESIGNER. I have reached out to their developer, and they said it is a conversation I need to have with Woocommerce since it concerns the table layout within your email template.FPD allows a customised product THUMBNAIL to be displayed in the notification email representing each product purchased and customised. When that thumbnail is displayed, the variations’ attribute fields are displayed alongside the thumbnail, with the field labels below. The CSS “float: none;” would fix this, but I am not able to find a class to apply that CSS to. I have temporarily deactivated the thumbnail option, but I’d like to resolve this somehow. Basically I would like to know WHERE to drop this line of code so that the thumbnail doesn’t have anything alongside it, but rather BELOW where it belongs. I’ve attached a link below to a page where I’ve put all the screenshots of the issue, as well as one with the Inspector open which shows the “float: left;” code which needs to change to “float: none;”
https://personalised4u.co.za/test/Thanks very much, and I hope you can help? Let me know if you need access to the site or if you can simply point me in the direction of the right file or class to target.
Many thanks
Ilana Gordon- popWeb
The page I need help with: [log in to see the link]
-
Hello @flashaha,
If I understand you correctly, you want to modify the CSS of WooCommerce emails.
First, you need to locate the selector, you can do so by simply inspecting the email element in a browser.
Link to image: https://d.pr/i/O1enhb
Then use the following hookwoocommerce_email_stylesto append changes.
Example: https://www.businessbloomer.com/woocommerce-add-css-woocommerce-emails/
Once you’re finished with the changes, add the snippet to yourfunctions.phpfile or use a plugin like Code snippet.
You can also check this guide for customizing WooCommerce emails: https://woocommerce.com/posts/how-to-customize-emails-in-woocommerce/
Hope this helps!
- The topic ‘Broken layout around thumbnail in confirmation email’ is closed to new replies.
