Add Price and Compare at Price to "Add To Cart" button - Dawn 14.0.0

Solved

Add Price and Compare at Price to "Add To Cart" button - Dawn 14.0.0

FloridaGlow
Explorer
92 0 11

Hey! I'm using Dawn 14.0.0, and want to switch the add to cart quick add button on the collection page and product page to have the "add to cart" on left side and price + compare at price on right side. Also, after doing that, how do I remove the original price tag from sight?

 

I want to get it from this:

image0.jpeg

To this:

image1.jpeg

Accepted Solution (1)

oscprofessional
Shopify Partner
16266 2431 3161

This is an accepted solution.

Hello @FloridaGlow 

Follow these Steps:

1) Go to Online Store

2) Edit Code
3) open 'card-product.liquid' and search for render 'price'  and comment it like below

oscprofessional_0-1721834103911.png

4) Now Search for '<product-form ' and in that replace the add the below code in button 

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

like this

oscprofessional_1-1721834366830.png



Add the below css in 'base.css' file

.quick-add__submit {
justify-content: space-between;
}



 

 



 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free

View solution in original post

Replies 13 (13)

AK_Design_Dev
Shopify Partner
187 16 16

Hello @FloridaGlow 

 

You need too some code under add to cart button for the price 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link:-

Contribution


Contact On My Mail :-mail@gmail.com

oscprofessional
Shopify Partner
16266 2431 3161

This is an accepted solution.

Hello @FloridaGlow 

Follow these Steps:

1) Go to Online Store

2) Edit Code
3) open 'card-product.liquid' and search for render 'price'  and comment it like below

oscprofessional_0-1721834103911.png

4) Now Search for '<product-form ' and in that replace the add the below code in button 

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

like this

oscprofessional_1-1721834366830.png



Add the below css in 'base.css' file

.quick-add__submit {
justify-content: space-between;
}



 

 



 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
FloridaGlow
Explorer
92 0 11

@oscprofessional Thanks so much! Would it also be possible to remove the cents if it ends with .00 and remove the "USD"? I want it to be one smooth line but because of the unneeded add-ons, it became 2 lines, this is what it looks like now:

 IMG_7847.jpg,

I'd like it to look more like the picture in the post, thanks so much!

oscprofessional
Shopify Partner
16266 2431 3161

Hello
For removing the currency code there is an option in theme setting . You need to uncheck the option

oscprofessional_0-1721838559852.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
FloridaGlow
Explorer
92 0 11

@oscprofessional Got it! Do you know of a way to remove the cents if it ends in .00, like if it is $25.00, is there a way to only say $25? Also, can I add text in the area where the price was?

oscprofessional
Shopify Partner
16266 2431 3161

For removing the decimal values
1) Click on settings
2) In General tab search for 'Currency display'
3) Click on the action button( three dots) next to it
4) Click on Change currency formatting

oscprofessional_1-1721840050697.png

 


5) And replace the {{amount}} with {{amount_no_decimals}}

oscprofessional_2-1721840164836.png


Thanks

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
FloridaGlow
Explorer
92 0 11

@oscprofessional Thanks! Sorry to bother, the compare at price is on the left of the regular price while the regular one is hugging the right side, can it be the opposite?

oscprofessional
Shopify Partner
16266 2431 3161

Try this
Go to the 'price.liquid' file and search for 'price__sale'.
Now replace the complete code for it with the below code

<div class="price__sale">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money_without_trailing_zeros }}
{% endif %}
</s>
</span>
{%- endunless -%}
</div>

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
FloridaGlow
Explorer
92 0 11

@oscprofessional Thanks so much! You are very helpful! One last thing and I will be done, where the price used to be, that text above the buy button, how would I go about creating my own text there, kind of like a few-word description about the product just under the product image where price used to be? Thanks!

oscprofessional
Shopify Partner
16266 2431 3161

For this better if you use metafield and show it at the place where the price used to be oriignally.
By using you can show different text for different product.
1) Go to settings > custom data >  products
2) Click on Add defintion and create a metafield (For refernce: https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-meta...
For example:

oscprofessional_0-1721843348746.png


3) Then go to the particular product from admin and scroll down to metafield option 
4) Add the text in it 

oscprofessional_1-1721843415470.png


5) Finally need to call the metafield in the html. For this Go to card-product.liquid file and add the code like below
<div class="card_product_text">{{ card_product.metafields.custom.card_product_text }}</div>

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
FloridaGlow
Explorer
92 0 11

@oscprofessional I made the metafield, but how can I place it directly under the product title where the price was if there is no option to add there? The whole thing is just called product grid within a collection.

FloridaGlow
Explorer
92 0 11

@oscprofessional additionally, how do I justify content in the button for mobile viewing? Once again, I apologize.

FloridaGlow
Explorer
92 0 11

@oscprofessional Hey, on mobile, can you please help me make the price much closer to the compare at price, but only on mobile?