Overriding the Configure button

Note: This document is only valid for the button automatically inserted by the configurator, not the shortcode.

Overriding the Configure button can be done using the filter mkl_pc_configure_button

Here’s the code in the plugin:

echo apply_filters( 'mkl_pc_configure_button', '<button class="configure-product configure-product-'. $product->get_type().' '. $this->button_class .'" type="button" data-price="'.esc_attr( $this->get_product_price( get_the_id() ) ).'" data-product_id="'.get_the_id().'">'. $label .'</button>' );

This will output

<button class="configure-product configure-product-simple primary button" type="button" data-price="200" data-product_id="10">Configure</button>

Let’s change this to a <a> tag, with a custom label:

<?php
  
add_filter( 'mkl_pc_configure_button', 'mkl_my_custom_configure_button' );
  
function mkl_my_custom_configure_button( $original_button ) {
	global $product;
	// If the global product isn't defined, return the original value
	if ( ! $product || ! is_a( $product, 'WC_Product' ) ) return $original_button;

	// Set a custom label
	$label = 'Customize this product';
	$price = mkl_pc( 'frontend' )->product->get_product_price( get_the_id() );
	// Let's change the tag to a link.
	// The class configure-product-'. $product->get_type() is required for the button to work
	$link = '<a href="#" class="configure-product configure-product-' . $product->get_type() . '"';
	// The attribute data-price is required for simple products
	$link .= ' data-price="' . esc_attr( $price ) . '"';
	// Add the product_id to the button
	$link .= ' data-product_id="' . get_the_id() . '">' . $label . '</a>';
	// return the new button/linkl
	return $link;
}

This will output something like this:

<a href="#" class="configure-product configure-product-simple" data-price="200" data-product_id="10">Customize this product</a>

If you wish to make this conditional, you can for example use custom fields, or target specific product IDs:

<?php
  
add_filter( 'mkl_pc_configure_button', 'mkl_my_custom_configure_button' );
  
function mkl_my_custom_configure_button( $original_button ) {
	global $product;
	// If the global product isn't defined, return the original value
	if ( ! $product || ! is_a( $product, 'WC_Product' ) ) return $original_button;
	// Check the meta 'change_button_only_on_this_product'
	$condition = get_post_meta( get_the_id(), 'change_button_only_on_this_product', true );
	// If that meta isn't set, return the original button.
  	if ( ! $condition ) return $original_button;
  
 	// The rest is as set previously:	
	// Set a custom label
	$label = 'Customize this product';
	$price = mkl_pc( 'frontend' )->product->get_product_price( get_the_id() );
	// Let's change the tag to a link.
	// The class configure-product-'. $product->get_type() is required for the button to work
	$link = '<a href="#" class="configure-product configure-product-' . $product->get_type() . '"';
	// The attribute data-price is required for simple products
	$link .= ' data-price="' . esc_attr( $price ) . '"';
	// Add the product_id to the button
	$link .= ' data-product_id="' . get_the_id() . '">' . $label . '</a>';
	// return the new button/linkl
	return $link;
}
Was this page helpful?
Leave a Reply

Your email address will not be published. Required fields are marked *