Ecommerce Shopify WordPress Discussion

Display Price And Compare Price on collection page

So I am trying to get display price and compare price of selected variant . I tried creating js function and calling value but nothing working here The price is not changing with change in variant selected. {%- liquid if collection.all_products_count > 0 and blocks_count > 0 if filter_type == 'vertical' render 'facets-vertical', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, blocks: section.blocks, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label else render 'facets-vertical', results: collection, enable_filtering: false, enable_sorting: false, enable_viewing: false, enable_sticky_facet: enable_sticky_facet, blocks: section.blocks, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label endif endif -%} <div class="product-grid-container{% unless filter_type == 'vertical' or blocks_count > 0 %} page-width{% endunless %}"> {%- liquid if enable_filtering or enable_sorting or enable_viewing if collection.all_products_count > 0 if filter_type == 'vertical' render 'facets-vertical-top', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, color_swatches_add_label: color_swatches_add_label elsif blocks_count > 0 render 'facets', results: collection, filter_type: filter_type, enable_filtering: enable_filtering, enable_filtering_color_swatches: enable_filtering_color_swatches, enable_sorting: enable_sorting, enable_viewing: enable_viewing, enable_sticky_facet: enable_sticky_facet, default_layout: default_layout, filter_max_items: filter_max_items, color_swatches_add_label: color_swatches_add_label endif endif endif -%} {%- paginate collection.products by products_per_page -%} <div id="ProductGridContainer"> {%- if collection.products.size == 0 -%} <div class="collection collection--empty" id="product-grid" data-id="{{ section.id }}"> <div class="loading-overlay"></div> <div class="title-wrapper center"> <p class="title title--primary h2"> {%- liquid if collection.filters.size > 0 echo 'sections.collection_template.empty' | t echo '<br/>' echo 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "link link--underline" else echo 'sections.collection_template.no_products' | t endif -%} </p> </div> </div> {%- else -%} <div class="collection"> <div class="loading-overlay"></div> {%- liquid assign grid_class = 'grid grid--2-col' if section.settings.columns_mobile == '1' assign grid_class = grid_class | append: ' grid--1-col-mobile' endif if products_per_row == 3 assign grid_class = grid_class | append: ' grid--3-col-tablet grid--3-col-desktop' elsif products_per_row == 4 assign grid_class = grid_class | append: ' grid--3-col-tablet grid--4-col-desktop' endif -%} <ul id="product-grid" data-id="{{ section.id }}" class="product-grid {{ grid_class }}" role="list"> {%- for product in collection.products -%} {% if product.type != 'FREEGIFT_HIDDEN' %} {%- liquid assign lazy_load = true if forloop.first assign lazy_load = false endif -%} <li class="grid__item"> {% render 'card-product', card_product: product, card_collection: collection, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_quick_buy: section.settings.show_quick_buy, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, enable_quick_view: section.settings.enable_quick_view, enable_color_swatches: section.settings.enable_color_swatches, enable_countdown: section.settings.enable_countdown, enable_image_fill: section.settings.enable_image_fill, lazy_load: lazy_load %} {% if request.page_type == 'collection' %} {% if product.variants.size > 1 %} <div class="product-variant-dropdown"> <form action="/cart/add" method="post"> <select name="id" class="product-variant-select"> {% for variant in product.variants %} {% if variant.available == true and variant.compare_at_price > 0 %} <option value="{{ variant.id }}">{{ variant.title }} - Rs. {{ variant.compare_at_price | divided_by: 100 | round: 2 }}</option> {% elsif variant.available == false %} <option value="{{ variant.id }}" disabled="disabled">{{ variant.title }} - Sold Out</option> {% else %} <!-- Handle other cases if needed --> {% endif %} {% endfor %} </select> {% unless product.available %} <input type="submit" value="Sold Out" class="product-variant-submit-button" disabled="disabled" /> {% else %} <input type="submit" value="Add to Cart" class="product-variant-submit-button" /> {% endunless %} </form> </div> {% endif %} {% endif %} {% if product.has_only_default_variant %} {% if product.available %} <form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> {% unless product.available %} <input type="submit" value="Sold Out" class="product-variant-submit-button" disabled="disabled" /> {% else %} <input type="submit" value="Add to Cart" class="product-variant-submit-button" /> {% endunless %} </form> {% endif %} {% endif %} </li> {% endif %} {%- endfor -%} </ul> {%- if paginate.pages > 1 -%} {% render 'pagination', paginate: paginate, pagination: section.settings.pagination %} {%- endif -%} </div> {%- endif -%} </div> {%- endpaginate -%} </div> </div> Run code snippetExpand snippet Reference image what i want : help me out its how to do this platform is shopify
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.