Return to previous page

Variable product page remove from before price

This topic has 13 replies, 3 voices, and was last updated 1 years, 9 months ago ago by trambussen

trambussen

Participant

December 16, 2022 at 16:00

Hi!
On our product page I will like to remove the word “Fra” before the price – on most of our products but keep it on a few products. Is that possible?

Here it makes sense, because the size of the battery changes the price (https://monstedcykler.dk/vare/winther-superbe-2-mat-roed-2022/)
But here it would be great if only the price on actually chosen battery was shown – not both “Fra”-price and the actual price!

But on most of our products the variation is only the size of the bicycle – which doesn’t affect the price and therefore is very confusing (https://monstedcykler.dk/vare/fuji-nevada-29r-1-3-satin-silver/)

Thanks in advance!!!

#341679 Copied Theme version: 8.3.8 WooCommerce version: 7.1.1

12 Answers

Tony Rodriguez

Support staff

December 17, 2022 at 06:19

Hello, @trambussen,

Actually, there is no option in the theme for this but you can achieve this using a custom CSS code. If it is global I can share the code with you but you want it from the specific so you have to make it on your own. Let me tell you how?

First of all, you need the price class to apply the CSS code to it. This is the CSS class of the price “.product-content .price”

Now, If you add your CSS code to this class it will hide the price from all the websites. But we need it from the specific product. So for this, we need to product id because the id is unique. See this image to know from where do you get the product id: https://postimg.cc/0zsr0krP so this is the product id “#product-9209”

So we have the product id and the price class now. Now, you are ready to apply your CSS code to it. You have to first write the product id and then the price class to hide the price from the product. But as you know that there are two prices and the class is the same on both so using the price class will hide both prices. But we need to hide only 1. So for this, we use “nth-child()” after the class name.

Alright, let’s make a code with the help of product id and price class.

product id = #product-9209
price class = .product-content .price
We need the nth-child too

We have to merge them. So that the code will be look like this: #product-9209 .product-content .price:nth-child(2){}

See this is the CSS class in which we will hide the price. To hide the price we use the display property of the CSS.

Below is the complete code:

#product-9209 .product-content .price:nth-child(2){display:none !important;}

You can add this code in Theme Settings >> Theme Custom CSS >> Global CSS.

Regards 8Themes Team.

#341701 Copied

trambussen

Participant

January 10, 2023 at 16:56

Hi again!

Maybe I didn’t explain it good enough!
As far as I can see the CSS code you gave me removes the price on the product page.

The intention was to remove the word “Fra” only (From in english) – and keep the price on the product page – on most products.

Only exception is the category “Elcykler” where the price changes with the battery size. Here “fra” before the price makes sense and shall remain!

Thanks in advance!

#343535 Copied

Rose Tyler

Support staff

January 11, 2023 at 13:55

Hello,

Could you provide temporary wp-admin and FTP access?

Regards

#343689 Copied

trambussen

Participant

January 11, 2023 at 16:21

See private content

Please contact administrator
for this information.

#343721 Copied
Rose Tyler

Support staff

January 11, 2023 at 18:32
Try to add the next code in Theme Options > Theme custom CSS:
```
.single-product:not(.product_cat-elcykler) .product-content .price {
    font-size: 0px;
}
.single-product:not(.product_cat-elcykler) .product-content .price span, .product_cat-elcykler .product-content .price  {
    font-size: 20px !important;
}
```
Regards
#343736 Copied
trambussen

Participant

February 7, 2023 at 09:16

See private content, please!

Please contact administrator
for this information.

#346225 Copied

Tony Rodriguez

Support staff

February 7, 2023 at 09:37

Hello @trambussen,

We would appreciate it if you could share detailed screenshots of your issue with us in the private content area. You can use the website https://postimages.org/ to upload the screenshots and provide us with the URL.

Best Regards,
8Theme’s Team

#346227 Copied

trambussen

Participant

February 7, 2023 at 15:30

See screenshots in private content area, please

Please contact administrator
for this information.

#346273 Copied

Rose Tyler

Support staff

February 7, 2023 at 15:53

Hello, Trambussen

Private Content

Best Regards,
8Themes Team

Please contact administrator
for this information.

#346280 Copied

trambussen

Participant

February 7, 2023 at 17:37

Thanks so much, Rose!
Can You help with these last things 😉
https://postimg.cc/67pcHQbW

#346328 Copied
Tony Rodriguez

Support staff

February 8, 2023 at 05:32
Hello, Trambussen,

Please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS, then save the changes. Afterward, please clear the browser cache and check the site again.
```
.single-product .woocommerce-variation-price span.price span.woocommerce-Price-amount.amount {
    color: red !important;
}
.single-product .products-page-cats {
    display: none !important;
}
.single-product span.tagged_as {
    display: none !important;
}
```
Thank you for your cooperation.

Sincerely,
8Theme’s Team
#346351 Copied
trambussen

Participant

February 9, 2023 at 15:45

Hi Tony!

Thank You so much – the support team is fantastic!

#346536 Copied
Tagged: page, price, product, templates, variable, woocommerce, wordpress
Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘Variable product page remove from before price’' has been successfully resolved, and the topic is now closed for further responses

Variable product page remove from before price

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection