[Plugin: WooCommerce] CSS rendering issue / How to remove code from php file?
-
I am currently using WooCommerce with the Dazzling theme and I’m having an issue when changing the layout of the product display page using CSS. I believe the issue stems from an element that is currently set to “display: none” however the browser is still rendering it which is affecting the element that comes after it.
This is what I currently get when I load my products page:
Image 1This is what I need to have:
Image 2I currently have the button as an inline element that is set to float: right. I can get to the layout that I need (the 2nd pic) by going into Chrome’s Inspect Element tool, disabling then re-enabling the float property on the button.
I’m assuming the issue lies in the fact that there is an element that isn’t being displayed between the “Free” text and the button. See image below for the text that isn’t being displayed:
Image 3When the page is rendered you are able to see the description text for maybe a second and then it gets hidden, which affects the placement of the button. See the code below:
<a href="http://www.abc.us/xyz/products/uncategorized/1-x-1-flexible-heater/"> <img src="http://www.abc.us/xyz/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="350" class="woocommerce-placeholder wp-post-image" height="453" /> <h3>1″ x 1″ Flexible Heater</h3> <span class="price">Free!</span> </a> <div itemprop="description"> <p>Features:</p> <ul> <li>Low mass, thin heaters provide even heat uniformity with extremely quick heat-up times</li> <li>Etched foil design which allows for the most efficient thermal transfer</li> <li>Suitable for vacuum environments</li> <li>Chemically resistant to many acids and solvents</li> <li>Available with adhesive and/or foil backing</li> <li>Rated to 200°C, even with adhesive</li> </ul> <p>Applications:</p> <ul> <li>Stabilization of electronic components</li> <li>Medical diagnostic equipment and analyzers</li> <li>Providing power for operation of electronics in cold weather environments</li> <li>Simulation of any number of heat transfer processes in larger systems</li> </ul> </div> <div class="gridlist-buttonwrap"> <a href="http://www.abc.us/xyz/products/uncategorized/1-x-1-flexible-heater/" rel="nofollow" data-product_id="53" data-product_sku="1000" data-quantity="1" class="btn btn-default add_to_cart_btn btn-default product_type_variable">Select options</a> </div> <hr /> </li>I’m wondering if deleting the <div itemprop=”description”> section would solve the issue, but I have no idea how to accomplish this or where I would even find the php that generates this code. Any help would be greatly appreciated. Thanks.
The topic ‘[Plugin: WooCommerce] CSS rendering issue / How to remove code from php file?’ is closed to new replies.