I am having trouble with WooWidgets on my sites. Anysite which is not a product site or a direct WooSite(Cart/Checkout etc.) is not applying the regular Woo Styling.
I also tried to add the Widgets to the assigned Shop site, same issue here. The widget that I am trying to use is the products by category widget.
On the Homepage I have added the certain widget. As you can see, the Icon for the Sale of the product has no styling at all (white buble in the corner). The striked price is displayed differently. On Mobile, the page is not centered and the products are not being ordered correctly compared to other category pages. The button text is also different. I will attach the Screenshots of the mainpage and of a regular category page.
Custom CSS is not an issue here. I tried it also on a clean page. I am using the Astra Theme.
The theme you are using usually controls the arrangement of the buttons, the padding, margins, and any other expectations related to the design.
We highly recommend to reach out to the support team of the theme you are using. They will be able to help you understand why this is happening. And provide a CSS code that can resolve the issue.
I hope this helps and let us know if you’ll have any further questions!
Hello @shahzeenfarooq , I have contacted the support team of Astra. After trying another Theme (Twenty Twenty-Five) the issue still occurs regarding the woo widgets. Yes, I have deactivated all plugins and turned them on one by one, issue still occurs.
Could you share screenshots of the issues you are facing with the Twenty Twenty-Five theme? Once I have seen the images, I will be in a better position to assist you further.
Hello @doublezed2 I have attached two screenshots. The screenshot saying “Unsere Top Deals” is faulty. The one with “Deal” is the correct one. As you can see, completely different styling.
Keep in mind, that the width setting is for both pages identical (according to the customizer settings)
The Deals page uses a page template while the Home page uses a Product Category block to show products. Since they are both different elements, they have different styles applied to them.
What you require is custom CSS to modify the appearance of the Product Category block. Since the custom code falls outside our support policy scope, I recommend consulting a professional web developer to help you with the customization.
You can find good developers at Codeable.io and WooExperts.com.
Hello @doublezed2 Thank you for your reply. I can’t really understand your conclusion. The block I am using for the product category is generated by WooCommerce. Your argument is based on the styling of the page. But how come the 3 different titles of the button? Those come from WooCommerce (product variants). Those products have all the identical settings. Therefore I doubt that it is just a style matter.
The issue regarding the words “Deals” and “Unsere Top Deals” being different is because “Deals” is appearing as a title and is wrapped in an <h2> tag, while “Unsere Top Deals” is added using a <p> tag. Please note that, by default, the text style for titles, headings, and paragraphs are always different from each other. If you want both “Deals” and “Unsere Top Deals” to have the same style, you will need to manually set the same color for both, or alternatively, you can add “Unsere Top Deals” as the page title so that both appear similar.
Regarding the different button titles, could you please create a staging site, activate the default WordPress theme and WooCommerce, and share the link to the staging site where you are facing the button issue? This will allow me to assist you further in determining why the buttons are appearing differently, as I am unable to replicate the issue on my test site.
Thank you for your cooperation and understanding.
Viewing 7 replies - 1 through 7 (of 7 total)
The topic ‘WooWidgets having random Styling’ is closed to new replies.
