Prices are not shown in product catalog when second currency is enabled

[veskuscript]

Hi,

I have a problem with the theme CSS. When enabling a plugin showing prices in two currencies at the same time(required in our country), both prices are gone in the product catalog. The plugin which shows second price adds another span after the theme .amount class span.
The second span as you can see in code below is the same class as the theme one, but adds additional .amount-eur. I think the problem is with the class .hide-larger-price which checks for .amount + .amount, but now they are 4, not 2, because of the second span which plugin adds which also uses .amount class.
<span class="price"><del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi>14.99&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></bdi></span><span class="woocommerce-Price-amount amount amount-eur"> (7.66€) </span></del> <span class="screen-reader-text">Original price was: 14.99&nbsp;лв. (7.66€).</span><ins aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi>9.99&nbsp;<span class="woocommerce-Price-currencySymbol">лв.</span></bdi></span><span class="woocommerce-Price-amount amount amount-eur"> (5.11€) </span></ins><span class="screen-reader-text">Текущата цена е: 9.99&nbsp;лв. (5.11€).</span></span>

I am attaching a image of the html and not shown prices.

Can you suggest me what to change in theme css to prevent this from happening.

• This topic was modified 3 months ago by veskuscript.

Attachments:

You must be logged in to view attached files.

Hi veskuscript,

Thanks for reaching to us and appreciate your patience.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Kind Regards,
Hung PD

Okay, i have added the needed information.

Hi veskuscript,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.hide-larger-price span.price:has(.amount+.amount) {
    visibility: visible;
    letter-spacing: 0 !important;
}

Regards,
Hung PD

I have tried your css, but only the general price is visible, and not the second one.

What do you think of this:
First we reset theme css, then we apply theme css to the 4 layers, not 2 like the theme css? You can see the images i uploaded. Alternatively if you can suggest how to replace theme css for 2 classes with css for 4 classes and remove this resesting.

.hide-larger-price .price:has(.amount + .amount) {
  visibility: initial!important;
  letter-spacing: initial!important;
}
.hide-larger-price .price:has(.amount + .amount) .amount + .amount {
  display: initial!important;
}
.hide-larger-price .price:has(.amount + .amount) > span,
.hide-larger-price .price:has(.amount + .amount) > div,
.hide-larger-price .price:has(.amount + .amount) > small {
  visibility: initial!important;
  letter-spacing: initial!important;
}
.hide-larger-price .price:has(.amount + .amount) > small {
  margin-inline-start: initial!important;
}

.hide-larger-price .price:has(.amount + .amount + .amount + .amount) {
  visibility: hidden;
  letter-spacing: -1em !important;
}
.hide-larger-price .price:has(.amount + .amount + .amount + .amount) .amount + .amount + .amount + .amount {
  display: none;
}
.hide-larger-price .price:has(.amount + .amount + .amount + .amount) > span,
.hide-larger-price .price:has(.amount + .amount + .amount + .amount) > div,
.hide-larger-price .price:has(.amount + .amount + .amount + .amount) > small {
  visibility: visible;
  letter-spacing: initial;
}
.hide-larger-price .price:has(.amount + .amount + .amount + .amount) > small {
  margin-inline-start: 0.2em;
}

Attachments:

You must be logged in to view attached files.

Hi veskuscript,

Please remove previous code and use below one:

.hide-larger-price span.price:has(.amount+.amount) .amount+.amount {
    display: inline-block;
}

.hide-larger-price span.price:has(.amount+.amount) {
    visibility: visible;
    letter-spacing: 0 !important;
}

Regards,
Hung PD

This way it’s working for products catalog, but not in Product page.

Hi veskuscript,

Please remove previous code and use below one:

.single-product.hide-larger-price .price:has(.amount+.amount) .amount+.amount,
.hide-larger-price span.price:has(.amount+.amount) .amount+.amount{
    display: inline-block;
}

.hide-larger-price span.price:has(.amount+.amount),
.single-product.hide-larger-price .price:has(.amount+.amount){
    visibility: visible;
    letter-spacing: 0 !important;
}

Regards,
Hung PD

Hi again, after last updates to theme the prices are gone in these cases:
1. in product catalog price is missing if product is Simple Product
2. in product catalog price is missing if product is Variable Product and after you choose one of the options
3. in single product page price is missing

Please check it, you still have access.

Hi veskuscript,

To assist you in the best possible manner, I kindly ask that you please provide me screenshots that illustrate the problem to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,
Hung PD

Hi, i attached the images you wanted.

In the first image you can see Product Catalog.
In the second is Single Page.

As you can see there is no price as described in my previous reply.

Attachments:

You must be logged in to view attached files.

Hi veskuscript,

I can’t login into your site, please double check https://prnt.sc/KiBd49xZZg65

Regards,
Hung PD

Hi,

Sorry, you can try again now.

Hi veskuscript,

Please use below CSS codes:

.hide-larger-price span.price:has(.amount ~ .amount) :is(.amount ~ .amount,[aria-hidden="true"]:not(.amount)){
    display: inline-block;
}

Regards,
Hung PD

[Author]

Posts