Display text after the price in shop and on single product page - Support

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
February 9, 2017 at 5:58 pm #744935

tremblayly
Participant

Hi

I found the following thread: https://kriesi.at/support/topic/add-a-custom-text-under-price-woocommerce-for-each-product-loop/#post-552443
to see if that would work for me. But is displays nothing.

Initially I was using the following code snippet in my functions.php file in my Child Theme and it displayed it inline with the price but it also adds this to the admin area:
// add text afer price
add_filter( ‘woocommerce_get_price_html’, ‘custom_price_message’ );
function custom_price_message( $price ) {
$new_price = $price . ‘ ’ . _(‘(To view wholesale prices, login to your wholesale account)’).'’;
return $new_price;
}

Could you help with having your CSS solution in the thread work on my site.

Right now I kept the code snippet from my functions.php file and added the following CSS to my general settings in Enfold:
.amount:after {
content: ‘ (To view wholesale prices, login to your wholesale account)’;
font-style:italic;
font-weight:bold;
color: #A99055;
font-size:14px!important;
position: relative;
left: -45px;
top: 18px;
}

.single-product .amount:after {
content: ‘ (To view wholesale prices, login to your wholesale account)’;
font-style:italic;
font-weight:bold;
color: #A99055;
font-size:14px!important;
position: relative;
left: -45px;
top: 18px;
}

My site in development but plan to launch in a week or two.

I have included access credentials so you can view the site.

Thank you
Lyse

February 14, 2017 at 12:04 pm #746833
Nikko
Inactive Moderator
Hey Lyse,

I could see the code working and can see this text after the price of a product in category and single product page (link in private content):
```
(To view wholesale prices, login to your wholesale account)
```
As for the css, what would you like to achieve? or change in it’s appearance?

Best regards,
Nikko
February 14, 2017 at 4:39 pm #746969

tremblayly
Participant

Hi Nikko,

I would like the text on the next line below the price (on the single product page) to have its own styling – not inherit the price styling.
I would also like the text to be smaller in the shop listings page.
Finally would like to know if I can remove from/or not get this text not displaying in the admin products listing page as part of the price column.

Thank you
Lyse

February 18, 2017 at 12:22 pm #748825
Ismael
Moderator
Hi!

Thank you for the update.

– Add this css code to move the text below the price.
```
span.woocommerce-Price-amount.amount {
 display: block !important;
}
```
– To make the font size smaller, alter the following line, remove the “!important” rule after the font size property.
```

```
And then add the following css code:
```
span.woocommerce-Price-amount.amount + span {
 font-size: 12px !important;
}
```
– I’m not sure what you want to do here. Could you please provide a screenshot?

Regards,
Ismael
February 18, 2017 at 11:24 pm #748911

tremblayly
Participant

Hi Ismael,

The “next line” css code snippet worked perfectly! Thank you

The “smaller font” css code did not work, so, instead of removing the “!important” in my span style in the functions.php file, I reduced the font size there. Then it worked. I removed the “smaller font” css code snippet from my styles.css file.

To clarify my last point, here’s a screenshot:
https://www.dropbox.com/s/w7kmenn6vfd56vp/wp%20admin%20product%20list%20page.jpg?dl=0

Thank you again
Lyse

February 20, 2017 at 5:15 am #749128
Ismael
Moderator
Hi!

Thank you for the info. Please replace the selector with the following:
```
.template-shop .amount:after
```
Regards,
Ismael
February 20, 2017 at 7:08 pm #749525

tremblayly
Participant

Hi Ismael,

I’m sorry, but could you please clarify which one the proposed selector needs to replace? It’s not clear what I need to do or where to add your suggestion.

Thanks
Lyse

February 21, 2017 at 6:11 am #749725
Ismael
Moderator
Hi!

This code:
```
.amount:after {
content: ‘(To view wholesale prices, login to your wholesale account)’;
font-style:italic;
font-weight:bold;
color: #A99055;
font-size:14px!important;
position: relative;
left: -45px;
top: 18px;
}
```
Replace it with:
```
.template-shop .amount:after {
content: '(To view wholesale prices, login to your wholesale account)';
font-style:italic;
font-weight:bold;
color: #A99055;
font-size:14px!important;
position: relative;
left: -45px;
top: 18px;
}
```
Best regards,
Ismael
February 21, 2017 at 6:00 pm #750068

tremblayly
Participant

Hi Ismael,

I replaced the code but it doubles the text. I removed the code and put back the original one.

It also did not remove the text in the admin product list panel.

Thanks
Lyse

February 22, 2017 at 7:22 am #750282
Ismael
Moderator
Hey!

Which of the modifications are using? Is it the css or the code in the functions.php file? If it’s the code in the functions.php file, just add the is_admin() conditional function. Look for this line:
```
function custom_price_message( $price ) {
```
Below, add this code:
```
if(is_admin()) return;
```
// https://codex.wordpress.org/Function_Reference/is_admin

Regards,
Ismael
February 22, 2017 at 5:18 pm #750556

tremblayly
Participant

Hi Ismael,

That did remove not only the text but also the price. Not what I want.

I’m re-thinking this notice because I’m not checking they customer role, so if they were to be logged in as wholesale customers they would still see that notice. I will discuss and convince my client to remove it.

I will let you know today whether to continue with this customization that perhaps may not bring sensible results.

Thank you for your patience so far and I will update this ticket soon.
Lyse

February 24, 2017 at 4:10 am #751195

Ismael
Moderator

Hi!

The conditional function should only work in the admin or the dashboard area, it should not affect the frontend. If you can provide the FTP and WP login details, we’ll do a quick test in your installation.

Cheers!
Ismael

February 24, 2017 at 7:10 pm #751543

tremblayly
Participant

Hi Ismael,

I’ve decided that after the price is not the best place to display the text. Is it possible to have it display on it’s own above the price (as a notice). So not part of the price. This way I wont’ mess up the price area, especially when it’s for a variable product, nor the admin product list.

My launch date is the 26th-27th. So I must get things working by this weekend.

Thanks
Lyse

February 27, 2017 at 5:25 am #752136
Ismael
Moderator
Hi!

Please replace the filter with the following:
```
add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_after_shop_loop_item_title_mod');
function woocommerce_after_shop_loop_item_title_mod() {
	echo '' . _('(To view wholesale prices, login to your wholesale account)').'';
}
```
Cheers!
Ismael
February 28, 2017 at 7:59 pm #753186

tremblayly
Participant

Hi Ismael,

I’m launched as of Sunday. I’ve been pretty busy fixing…..

I just tried the above code snippet, however it did not display text between the product title and price on the single product page when I want to add it. Instead in added it to the product category display page and any related products areas where I don’t want to display it.

I removed the code for now.

Thanks
Lyse

March 1, 2017 at 7:08 am #753454

Ismael
Moderator

Hi!

I thought that you want to add it in the shop page. It’s actually stated in this thread’s title.

Display text after the price in shop and on single product page

Please try the following hook instead:

// http://hookr.io/actions/woocommerce_after_single_product_summary/

Or post the ftp details here so that we can add it.

Best regards,
Ismael
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.