Below, you’ll find a detailed guide on how to add the Product Configurator for WooCommerce Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Product Configurator for WooCommerce Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Product Configurator for WooCommerce Plugin and the shortcodes it provides:
"Product Configurator for WooCommerce is a highly versatile plugin that enables you to create and customize your own product configurations on your WooCommerce platform."
- [mkl_configurator_button]
- [mkl_configurator]
Product Configurator for WooCommerce [mkl_configurator_button] Shortcode
The Product Configurator for WooCommerce shortcode is an essential tool for dynamic product customization. It allows the addition of a configurable button to a WooCommerce product. This shortcode, when used, fetches the product ID and checks its validity. If a valid ID is provided, it fetches the product details and sets the button class. It also ensures compatibility with WPML for multi-language sites. The shortcode then enqueues a script for the product and sets the button label. If no content is provided, the default ‘Configure’ label is used. It also supports custom button classes and tags. Finally, it returns a button or link with the necessary data attributes for the product, allowing users to configure the product directly from the page.
Shortcode: [mkl_configurator_button]
Parameters
Here is a list of all possible mkl_configurator_button shortcode parameters and attributes:
product_id– Defines the specific product to configureclasses– Adds extra CSS classes to the buttontag– Changes the HTML tag of the button, options are ‘a’ or ‘link’
Examples and Usage
Basic example – Display a product configuration button for a specific product using the product’s ID.
[mkl_configurator_button product_id=123 /]Advanced examples
Display a product configuration button with custom CSS classes. This can be useful for styling the button to match the rest of your site.
[mkl_configurator_button product_id=123 classes="my-custom-class another-class" /]Using the shortcode to display a product configuration button as a link instead of a button. This can be useful if you want to use a hyperlink instead of a button for stylistic or design reasons.
[mkl_configurator_button product_id=123 tag="a" /]Using the shortcode to display a product configuration button with a custom label. This can be useful if you want to use a different text for the button than the default “Configure”.
[mkl_configurator_button product_id=123]Custom Label[/mkl_configurator_button]Using the shortcode to display a product configuration button with a forced form. This can be useful if you want to force the display of the product configuration form when the button is clicked.
[mkl_configurator_button product_id=123 force_form=1 /]PHP Function Code
In case you have difficulties debugging what causing issues with [mkl_configurator_button] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'mkl_configurator_button', array( $this, 'button_shortcode' ) );Shortcode PHP function:
function button_shortcode( $atts, $content = '' ) {
if ( ! isset( $atts[ 'product_id' ] ) ) {
global $product;
if ( ! $product || ! is_a( $product, 'WC_Product' ) ) return __( 'A product id must be set in order for this shortcode to work.', 'product-configurator-for-woocommerce' );
$product_id = $product->get_id();
} else {
global $mkl_product;
$product_id = intval( $atts[ 'product_id' ] );
if ( function_exists( 'wpml_object_id_filter' ) ) {
$translated_product_id = wpml_object_id_filter( $product_id );
if ( $translated_product_id ) $product_id = $translated_product_id;
}
$product = $mkl_product = wc_get_product( $product_id );
}
$shortcode_class = isset( $atts[ 'classes' ] ) ? Utils::sanitize_html_classes( $atts[ 'classes' ] ) : '';
if ( ! $product || ! mkl_pc_is_configurable( $product_id ) ) return __( 'The provided ID is not a valid product.', 'product-configurator-for-woocommerce' );
$date_modified = $product->get_date_modified();
wp_enqueue_script( 'mkl_pc/js/fe_data_'.$product_id, Plugin::instance()->cache->get_config_file($product_id), array(), ( $date_modified ? $date_modified->getTimestamp() : MKL_PC_VERSION ), true );
if ( ! trim( $content ) ) $content = mkl_pc( 'settings' )->get_label( 'mkl_pc__button_label', __( 'Configure', 'product-configurator-for-woocommerce' ) );
$options = get_option( 'mkl_pc__settings' );
$button_class = isset( $options['mkl_pc__button_classes'] ) ? Utils::sanitize_html_classes( $options['mkl_pc__button_classes'] ) : 'primary button btn btn-primary';
if ( isset( $atts['tag'] ) && ( 'a' === $atts['tag'] || 'link' === $atts['tag'] ) ) {
$tag_name = 'a href="#" ';
$tag_name_close = 'a';
} else {
$tag_name = 'button type="button"';
$tag_name_close = 'button';
}
$data_attributes = array(
'price' => $this->product->get_product_price( $product_id ),
'product_id' => $product_id,
);
if ( isset( $atts[ 'product_id' ] ) ) {
$data_attributes['force_form'] = 1;
}
$data_attributes = apply_filters( 'mkl_configurator_button_data_attributes', $data_attributes, $product_id, $atts );
return '<' . $tag_name . ' class="'.$button_class.' is-shortcode configure-product-simple configure-product '.$shortcode_class.'" ' . implode( ' ', $this->_output_data_attributes( $data_attributes ) ) . '>'.$content.'</' . $tag_name_close . '>';
}
Code file location:
product-configurator-for-woocommerce/product-configurator-for-woocommerce/inc/frontend/frontend-woocommerce.phpProduct Configurator for WooCommerce [mkl_configurator] Shortcode
The Product Configurator for WooCommerce shortcode is designed to fetch and display product details. It validates the product ID and checks if the product is configurable. The shortcode enqueues a script to load product data and displays a ‘Configure’ button. It also handles product translations for WPML and includes custom classes if specified.
Shortcode: [mkl_configurator]
Parameters
Here is a list of all possible mkl_configurator shortcode parameters and attributes:
product_id– The unique identifier of the product you want to configure.classes– Allows you to add custom CSS classes to the configurator.
Examples and Usage
Basic example – Display a product configurator for a specific product using its ID
[mkl_configurator product_id=123 /]Advanced examples
Display a product configurator for a specific product using its ID and add additional CSS classes to the configurator’s container.
[mkl_configurator product_id=123 classes="my-custom-class another-custom-class" /]Display a product configurator for a specific product using its ID and force the form to be displayed even if the product is not configurable.
[mkl_configurator product_id=123 force_form=1 /]Display a product configurator for a specific product using its ID, add additional CSS classes to the configurator’s container, and force the form to be displayed even if the product is not configurable.
[mkl_configurator product_id=123 classes="my-custom-class another-custom-class" force_form=1 /]PHP Function Code
In case you have difficulties debugging what causing issues with [mkl_configurator] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'mkl_configurator', array( $this, 'configurator_shortcode' ) );Shortcode PHP function:
function configurator_shortcode( $atts, $content = '' ) {
if ( ! isset( $atts[ 'product_id' ] ) ) {
global $product, $post;
if ( ! $product ) return __( 'A product id must be set in order for this shortcode to work.', 'product-configurator-for-woocommerce' );
if ( $product && ! is_a( $product, 'WC_Product' ) ) {
if ( is_string( $product ) && $post ) {
$product = wc_get_product( $post );
}
if ( ! is_a( $product, 'WC_Product' ) ) return __( 'The global product variable is not a WC_Product instance', 'product-configurator-for-woocommerce' ) . ' - ' . print_r( $product, true );
}
$product_id = $product->get_id();
} else {
global $mkl_product;
$product_id = intval( $atts[ 'product_id' ] );
if ( function_exists( 'wpml_object_id_filter' ) ) {
$translated_product_id = wpml_object_id_filter( $product_id );
if ( $translated_product_id ) $product_id = $translated_product_id;
}
$product = $mkl_product = wc_get_product( $product_id );
}
$shortcode_class = isset( $atts[ 'classes' ] ) ? Utils::sanitize_html_classes( $atts[ 'classes' ] ) : '';
if ( ! $product || ! mkl_pc_is_configurable( $product_id ) ) return __( 'The provided ID is not a valid product.', 'product-configurator-for-woocommerce' );
$date_modified = $product->get_date_modified();
wp_enqueue_script( 'mkl_pc/js/fe_data_'.$product_id, Plugin::instance()->cache->get_config_file($product_id), array(), ( $date_modified ? $date_modified->getTimestamp() : MKL_PC_VERSION ), true );
if ( ! trim( $content ) ) $content = __( 'Configure', 'product-configurator-for-woocommerce' );
$data_attributes = array(
'price' => $this->product->get_product_price( $product_id ),
'product_id' => $product_id,
'loading' => mkl_pc( 'settings' )->get_label( 'loading_configurator_message', __( 'Loading the configurator...', 'product-configurator-for-woocommerce' ) ),
);
if ( isset( $atts[ 'product_id' ] ) ) {
$data_attributes['force_form'] = 1;
}
$data_attributes = apply_filters( 'mkl_configurator_data_attributes', $data_attributes, $product_id, $atts );
return '<div class="mkl-configurator-inline is-shortcode configure-product '.$shortcode_class.'" ' . implode( ' ', $this->_output_data_attributes( $data_attributes ) ) . '></div>';
}
Code file location:
product-configurator-for-woocommerce/product-configurator-for-woocommerce/inc/frontend/frontend-woocommerce.phpConclusion
Now that you’ve learned how to embed the Product Configurator for WooCommerce Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply