Conflict with theme style

  • Resolved cousinr

    (@cousinr)


    2 years, 11 months ago

    Hi,
    I like the work you’ve done, but the plugin conflicts a bit with my theme. In my case it is Electro. But another thing is important.
    I’m not sure exactly, but most likely the get_price_html hook that calls the plugin re-adds the <span class=”electro-price”> classes, which causes the price display styles to be broken. Achieving a fix with styles is difficult, due to the fact that the styles are added twice.

    This is what the price code looks like before the plugin was activated:

    <span class="electro-price">
	<ins>
		<span class="woocommerce-Price-amount amount">
			<bdi>1,80;
			<span class="woocommerce-Price-currencySymbol"> $</span>
			</bdi>
		</span>
	</ins> 
	<del>
		<span class="woocommerce-Price-amount amount">
			<bdi>2,00;
			<span class="woocommerce-Price-currencySymbol"> $</span>
			</bdi>
		</span>
	</del>
</span>

    After:

    <span class="electro-price">
	<span class="price-from">From:</span> 
	<span class="electro-price">
		<ins>
			<span class="woocommerce-Price-amount amount">
				<bdi>1,80;
				<span class="woocommerce-Price-currencySymbol"> $</span>
				</bdi>
			</span>
		</ins> 
		<del>
			<span class="woocommerce-Price-amount amount">
				<bdi>2,00;
				<span class="woocommerce-Price-currencySymbol"> $</span>
				</bdi>
			</span>
		</del>
	</span>
</span>

    Maybe the old hook should be removed or overridden before calling the new hook? Or some other way of doing it:

    <span class="electro-price">
	<span class="price-from">From:</span> 
	<ins>
		<span class="woocommerce-Price-amount amount">
			<bdi>1,80;
			<span class="woocommerce-Price-currencySymbol"> $</span>
			</bdi>
		</span>
	</ins> 
	<del>
		<span class="woocommerce-Price-amount amount">
			<bdi>2,00;
			<span class="woocommerce-Price-currencySymbol"> $</span>
			</bdi>
		</span>
	</del>
</span>

    Thanks for any help

    • This topic was modified 2 years, 11 months ago by cousinr.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Josserand

    (@josserand)

    Themes that heavily change the default woocommerce structure may not work with the plugin out of the box.

    For the plugin to work, the price display must have this classes :
    .product-type-variable .summary .price
    Meaning the price must have the price class, and be contained in a summary container, which itself must be in a product-type-variable container.

    I may add a jQuery selector someday in the plugin’ settings, but in the meantime, your best solution would be to edit your theme’s woocommerce product display template, and add the classes I mentionned.

    Just adding <span class="electro-price price"> may be sufficient if your theme kept the product-type-variable and summary classes

    Thread Starter cousinr

    (@cousinr)

    Hi @josserand,
    thanks to your response, the author helped me solve this problem with css and php code.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Conflict with theme style’ is closed to new replies.