Woocommerce Single product Hooks issue: Replace add to cart button

I have created a new FUNCTION for my product page. It says WHEN _shipping_costs is empty (no digit) than change the button on "price on request". Archive page On the archive page you can clearly see it works perfectly. But I stuggle on a single product page to change the button. Single product page This is build up the next way. New button function: function custom_add_price_on_request_button() { global $product; $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { echo '<a class="button price-on-request-button" href="mailto:info@yourstore.com"><span>Prijs op</span><span>aanvraag</span></a>'; } } add_action('woocommerce_after_shop_loop_item', 'custom_add_price_on_request_button', 11); Remove button + add new button function: function custom_remove_and_add_cart_button_single() { global $product; $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { // Remove the default add to cart button remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); remove_action('woocommerce_single_product_summary', 'woocommerce_single_variation_add_to_cart_button', 30); // Add a custom 'Prijs op aanvraag' button add_action('woocommerce_single_product_summary', 'custom_add_price_on_request_button', 35); } } add_action('woocommerce_before_single_product_summary', 'custom_remove_and_add_cart_button_single', 1); As you can see it says IF shippingcosts === '' (empty) than remove "Add to cart" button and change it to the "new function button". As you aswell can see on the archive page it works fine but not on the single product page. Anyone see what is wrong with the Hook of Woocommerce I use? I have found a few websites with the Wooks information but I don't see to mange to fix it: https://wcsuccessacademy.com/woocommerce-visual-hook-guide-single-product-page/ Full code working for the archive page but not for the single product page. // Update the price display for products with no shipping cost function custom_price_on_request($price, $product) { $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { return '<span class="price-on-request">Prijs op aanvraag</span>'; } return $price; } add_filter('woocommerce_get_price_html', 'custom_price_on_request', 10, 2); // Remove the 'Add to Cart' button if there are no shipping costs on archive pages function custom_remove_add_to_cart_button_loop() { global $product; $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10); } } add_action('woocommerce_before_shop_loop_item', 'custom_remove_add_to_cart_button_loop', 1); // Verwijder de 'Toevoegen aan winkelwagen' knop op enkele productpagina's en voeg 'Prijs op aanvraag' knop toe function custom_remove_and_add_cart_button_single_product() { global $product; $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { // Verwijder de standaard 'add to cart' knop remove_action('woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30); remove_action('woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20); // Voeg een aangepaste 'Prijs op aanvraag' knop toe add_action('woocommerce_simple_add_to_cart', 'custom_add_price_on_request_button', 30); add_action('woocommerce_single_variation', 'custom_add_price_on_request_button', 20); } } // Filter the add to cart button link verwijderd "toevoegen aan winkelwagen" en behoudt "prijs op aanvraag" function custom_add_to_cart_button($link, $product) { $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { return ''; // Return an empty string to remove the button } return $link; } add_filter('woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_button', 10, 2); // Add a custom button with 'Prijs op aanvraag' function custom_add_price_on_request_button() { global $product; $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { echo '<a class="button price-on-request-button" href="mailto:info@yourstore.com"><span>Prijs op</span><span>aanvraag</span></a>'; } } add_action('woocommerce_after_shop_loop_item', 'custom_add_price_on_request_button', 11); // for loop pages // Add custom CSS to make the button style the same function custom_price_on_request_styles() { echo '<style> .price-on-request-button { background-color: #4caf50; /* Same background color */ color: #ffffff; /* Same text color */ border: 1px solid #4caf50; /* Same border */ padding: 10px 30px; /* Same padding */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 4px; box-shadow: 0 4px #999; /* Added shadow */ } .price-on-request-button span { display: block; } </style>'; } add_action('wp_head', 'custom_price_on_request_styles');

Comment (1)

Jese Leos

August 10, 2024

Verified user

Solution found! // Update the price display for products with no shipping cost function custom_price_on_request($price, $product) { $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { return '<span class="price-on-request">Prijs op aanvraag</span>'; } return $price; } add_filter('woocommerce_get_price_html', 'custom_price_on_request', 10, 2); // Remove the 'Add to Cart' button if there are no shipping costs on archive pages function custom_remove_add_to_cart_button_loop() { global $product; $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10); } } add_action('woocommerce_before_shop_loop_item', 'custom_remove_add_to_cart_button_loop', 1); // Verwijder de 'Toevoegen aan winkelwagen' knop op enkele productpagina's en voeg 'Prijs op aanvraag' knop toe function custom_remove_and_add_cart_button_single() { global $product; if (is_string($product)) { $product = wc_get_product(); } $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { // Verwijder de standaard 'add to cart' knop remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); // Voeg een aangepaste 'Prijs op aanvraag' knop toe add_action('woocommerce_single_product_summary', 'custom_add_price_on_request_button_single', 30); } } add_action('woocommerce_before_single_product_summary', 'custom_remove_and_add_cart_button_single', 1); // Filter the add to cart button link verwijderd "toevoegen aan winkelwagen" en behoudt "prijs op aanvraag" function custom_add_to_cart_button($link, $product) { $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { return ''; // Return an empty string to remove the button } return $link; } add_filter('woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_button', 10, 2); // Add a custom button with 'Prijs op aanvraag' function custom_add_price_on_request_button() { global $product; if (!is_a($product, 'WC_Product')) { return; // Exit if $product is not a valid WC_Product object } $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { echo '<a class="button price-on-request-button" href="mailto:info@yourstore.com"><span>Prijs op</span><span>aanvraag</span></a>'; } } add_action('woocommerce_after_shop_loop_item', 'custom_add_price_on_request_button', 11); // for loop pages function custom_add_price_on_request_button_single() { global $product; if (is_string($product)) { $product = wc_get_product(); } if (!is_a($product, 'WC_Product')) { return; // Exit if $product is not a valid WC_Product object } $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { echo '<a class="button price-on-request-button" href="mailto:info@yourstore.com"><span>Prijs op aanvraag</span></a>'; } } // Elementor specific hook to remove the default add to cart button and add the custom button add_action('elementor/frontend/after_render', function() { if (is_product()) { global $product; if (is_string($product)) { $product = wc_get_product(); } $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { // Verwijder de standaard 'add to cart' knop remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); // Voeg een aangepaste 'Prijs op aanvraag' knop toe if (!did_action('custom_price_on_request_button_added')) { custom_add_price_on_request_button_single(); do_action('custom_price_on_request_button_added'); } } } }); add_filter('body_class', function($classes) { if (is_product()) { global $product; if (is_string($product)) { $product = wc_get_product(); } $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); $shipping_cost_class = empty($shipping_cost) ? 'no-shipping-cost' : 'has-shipping-cost'; $classes[] = $shipping_cost_class; } return $classes; }); // JavaScript toevoegen om de knop "Toevoegen aan winkelwagen" dynamisch te verwijderen function custom_add_to_cart_button_js() { ?> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { if (document.body.classList.contains('no-shipping-cost')) { var addToCartButton = document.querySelector('.single_add_to_cart_button'); if (addToCartButton) { addToCartButton.remove(); } var priceOnRequestButton = document.querySelector('.price-on-request-button'); if (priceOnRequestButton) { var cartForm = document.querySelector('form.cart'); if (cartForm) { cartForm.appendChild(priceOnRequestButton); } } } }); </script> <?php } add_action('wp_footer', 'custom_add_to_cart_button_js'); // Add custom CSS to make the button style the same function custom_price_on_request_styles() { echo '<style> .price-on-request-button { background-color: #4caf50; /* Same background color */ color: #ffffff; /* Same text color */ border: 1px solid #4caf50; /* Same border */ padding: 10px 30px; /* Same padding */ text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 4px; box-shadow: 0 4px #999; /* Added shadow */ } .price-on-request-button span { display: block; } body.no-shipping-cost .elementor-widget-container .quantity { display: none; } </style>'; } add_action('wp_head', 'custom_price_on_request_styles'); Important part for Elementor "ADD TO CART" button // Elementor specific hook to remove the default add to cart button and add the custom button add_action('elementor/frontend/after_render', function() { if (is_product()) { global $product; if (is_string($product)) { $product = wc_get_product(); } $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true); if ($shipping_cost === '') { // Verwijder de standaard 'add to cart' knop remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); // Voeg een aangepaste 'Prijs op aanvraag' knop toe if (!did_action('custom_price_on_request_button_added')) { custom_add_price_on_request_button_single(); do_action('custom_price_on_request_button_added'); } } } }); // JavaScript toevoegen om de knop "Toevoegen aan winkelwagen" dynamisch te verwijderen function custom_add_to_cart_button_js() { ?> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { var addToCartButton = document.querySelector('.single_add_to_cart_button'); if (addToCartButton) { addToCartButton.remove(); } var priceOnRequestButton = document.querySelector('.price-on-request-button'); if (priceOnRequestButton) { var cartForm = document.querySelector('form.cart'); if (cartForm) { cartForm.appendChild(priceOnRequestButton); } } }); </script> <?php } add_action('wp_footer', 'custom_add_to_cart_button_js');

You’ll be in good company