Below, you’ll find a detailed guide on how to add the ProductX 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 ProductX Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the ProductX Plugin and the shortcodes it provides:
"ProductX – WooCommerce Builder & Gutenberg WooCommerce Blocks is a robust WordPress plugin. It's designed to amplify your WooCommerce store, providing seamless Gutenberg integration for your products."
- [wopb_compare]
- [product_blocks]
- [wopb_wishlist]
ProductX [wopb_compare] Shortcode
The Product Blocks shortcode creates a comparison table for WooCommerce products. It fetches product data like title, price, description, availability, SKU, dimensions, weight, and additional attributes.
Shortcode: [wopb_compare]
Examples and Usage
Basic example – Displaying the comparison of products using their IDs.
[wopb_compare ids="1,2,3" /]Advanced examples
Comparing products using their IDs and customizing the display with parameters. The parameters can control the source of the data, allowing you to pull the comparison data either directly or through a modal.
[wopb_compare ids="1,2,3" params="source:direct" /]Another advanced usage of the shortcode can be to compare products using their IDs and fetching the comparison data through a modal. If the modal source is not found, the comparison data will be fetched directly.
[wopb_compare ids="1,2,3" params="source:modal" /]Remember that the ‘ids’ attribute in the shortcode should contain the IDs of the products you want to compare, separated by commas. The ‘params’ attribute can take different parameters to customize the display of the comparison table. In the examples above, we used the ‘source’ parameter to specify where the comparison data should be fetched from.
PHP Function Code
In case you have difficulties debugging what causing issues with [wopb_compare] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wopb_compare', array($this, 'compare_shortcode_callback'));Shortcode PHP function:
function compare_shortcode_callback($ids = array(), $params = []) {
$html = '';
$compare_data = empty($ids) ? wopb_function()->get_compare_id() : $ids;
if (count($compare_data) > 0) {
$_product = $_price = $_short_description = $_additional = $_weight = $_availability = $_add_to_cart = $_sku = $_dimensions = $_action = '';
$html .= '<div class="wopb-modal-content wopb-compare-modal-content'.(empty($post_id) ? ' wopb-compare-shortcode' : '').'">';
$html .= '<div class="wopb-compare-modal">';
foreach ($compare_data as $key => $val) {
$product = wc_get_product($val);
if ($product) {
$_product .= '<td class="col'.esc_attr($key).'">';
$_product .= '<a class="wopb-compare-thumbnail" href="'.esc_url($product->get_permalink()).'">';
$_product .= $product->get_image('woocommerce_thumbnail');
$_product .= $product->get_title();
$_product .= wc_get_rating_html( $product->get_average_rating() );
$_product .= '</a>';
$_product .= '</td>';
$_price .= '<td class="col'.esc_attr($key).'">'.wp_kses_post($product->get_price_html()).'</td>';
$_short_description .= '<td class="col'.esc_attr($key).'">'.wp_kses_post($product->get_short_description()).'</td>';
ob_start();
wc_display_product_attributes( $product );
$additional = ob_get_clean();
$_additional .= '<td class="col'.esc_attr($key).'">'.($additional ? $additional : '-').'</td>';
$weight = $product->get_weight();
$weight = $weight ? ( wc_format_localized_decimal( $weight ) . ' ' . esc_attr( get_option( 'woocommerce_weight_unit' ) ) ) : '-';
$_weight .= '<td class="col'.esc_attr($key).'">'.sprintf( '<span>%s</span>', esc_html( $weight ) ).'</td>';
// $_description .= '<td class="col'.esc_attr($key).'">'.esc_html($product->get_description()).'</td>';
$_availability .= '<td class="col'.esc_attr($key).'">'.( ($product->is_purchasable() && $product->is_in_stock()) ? $product->get_stock_quantity().' '.esc_html__('in stock', 'product-blocks') : '' ).'</td>';
$_add_to_cart .= '<td class="col'.esc_attr($key).'">'.do_shortcode('[add_to_cart style="" id="'.esc_attr($product->get_id()).'" show_price="false"]').'</td>';
$_sku .= '<td class="col'.esc_attr($key).'">'.esc_html($product->get_sku() ? $product->get_sku() : '-').'</td>';
$_dimensions .= '<td class="col'.esc_attr($key).'">'.esc_html(wc_format_dimensions($product->get_dimensions(false))).'</td>';
$_action .= '<td class="col'.esc_attr($key).'"><a class="wopb-compare-remove" data-class="col'.esc_attr($key).'" href="#" data-action="remove" data-postid="'.esc_attr($product->get_id()).'">'.esc_html__('Remove', 'product-blocks').' <span>x</span></a></td>';
}
}
$html .= '<div class="wopb-table-responsive">';
$html .= '<table>';
$html .= '<thead style="position:sticky;top:0;">
<tr>
<th>'.esc_html__('Action', 'product-blocks').'</th>';
$html .= $_action;
if(isset($params['source']) && $params['source'] == 'modal') {
$html .= '<th class="wopb-modal-close"></th>';
}
'</tr>
</thead>';
$html .= '<tbody>';
$html .= '<tr><th>'.esc_html__('Product', 'product-blocks').'</th>'.wp_kses_post($_product).'</tr>';
$html .= '<tr><th>'.esc_html__('Price', 'product-blocks').'</th>'.wp_kses_post($_price).'</tr>';
$html .= '<tr><th>'.esc_html__('Short Description', 'product-blocks').'</th>'.wp_kses_post($_short_description).'</tr>';
$html .= '<tr><th>'.esc_html__('Availability', 'product-blocks').'</th>'.wp_kses_post($_availability).'</tr>';
$html .= '<tr><th>'.esc_html__('Add to Cart', 'product-blocks').'</th>'.wp_kses_post($_add_to_cart).'</tr>';
$html .= '<tr><th>'.esc_html__('SKU', 'product-blocks').'</th>'.wp_kses_post($_sku).'</tr>';
$html .= '<tr><th>'.esc_html__('Dimensions', 'product-blocks').'</th>'.wp_kses_post($_dimensions).'</tr>';
$html .= '<tr><th>'.esc_html__('Weight', 'product-blocks').'</th>'.wp_kses_post($_weight).'</tr>';
$html .= '<tr><th>'.esc_html__('Additional', 'product-blocks').'</th>'.wp_kses_post($_additional).'</tr>';
$html .= '</tbody>';
$html .= '</table>';
$html .= '</table>';
$html .= '</div>';
// $html .= '<div class="wopb-modal-close"></div>';
$html .= '</div>';
}
else {
$html .= '<h3>'. __('Your Compare list is empty.', 'product-blocks') .'</h3>';
}
return $html;
}
Code file location:
product-blocks/product-blocks/addons/compare/Compare.phpProductX [product_blocks] Shortcode
The ‘product_blocks’ shortcode from the Product Blocks plugin is designed to display specific product blocks based on the ID provided. The shortcode retrieves the content from the specified post ID, processes any nested blocks or shortcodes, and removes unnecessary HTML tags. It then wraps the content in a div with a unique class and data attribute for styling and scripting purposes. If the specified post ID is not valid, it returns an empty string.
Shortcode: [product_blocks]
Parameters
Here is a list of all possible product_blocks shortcode parameters and attributes:
id– It specifies the unique ID of the product block post.
Examples and Usage
Basic example – A simple shortcode usage to display a product block by referencing its ID.
[product_blocks id=1 /]Advanced examples
Using the shortcode to display a product block by referencing its ID. If the product block with the specified ID is not published or is password protected, the shortcode will return an empty string.
[product_blocks id=2 /]Using the shortcode to display a product block by referencing its ID. If the product block with the specified ID does not exist, the shortcode will return an empty string.
[product_blocks id=9999 /]Please note that the ‘id’ attribute in the shortcode should correspond to the ID of the product block you want to display. The ID of a product block can be found in the WordPress admin panel, under the ‘Product Blocks’ section.
PHP Function Code
In case you have difficulties debugging what causing issues with [product_blocks] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('product_blocks', array($this, 'shortcode_callback'));Shortcode PHP function:
function shortcode_callback( $atts = array(), $content = null ) {
extract(shortcode_atts(array(
'id' => ''
), $atts));
$content = '';
$id = is_numeric( $id ) ? (float) $id : false;
if ($id) {
$init = new \WOPB\Initialization();
$init->register_scripts_common();
$extra = wopb_function()->set_css_style($id ,true);
$content_post = get_post($id);
if ($content_post && $content_post->post_status == 'publish' && $content_post->post_password == '') {
$content = $content_post->post_content;
$content = do_blocks($content);
$content = do_shortcode($content);
$content = str_replace(']]>', ']]>', $content);
$content = preg_replace('%<p> \s*</p>%', '', $content);
$content = preg_replace('/^(?:<br\s*\/?>\s*)+/', '', $content);
return $extra.'<div class="wopb-shortcode" data-postid="'.esc_attr($id).'">' . $content . '</div>';
}
}
return '';
}
Code file location:
product-blocks/product-blocks/addons/templates/Shortcode.phpProductX [wopb_wishlist] Shortcode
The ‘wopb_wishlist’ shortcode from Product-Blocks plugin is used to display a wishlist on a WordPress site. This shortcode generates a table listing products added to the wishlist, including product images, names, prices, and actions. If the wishlist is empty, it shows a message and a link to continue shopping. It also provides options to add all wishlist items to the cart and to visit the wishlist page.
Shortcode: [wopb_wishlist]
Examples and Usage
Basic example – Displaying the wishlist using the shortcode without any parameters. The wishlist will be populated with the products added by the user.
[wopb_wishlist /]Advanced examples
Using the shortcode to display a custom message along with the wishlist. The message will be displayed at the top of the wishlist.
[wopb_wishlist message="Here is your wishlist!" /]Using the shortcode to display the wishlist for specific products. The product IDs need to be passed as an array in the shortcode. The wishlist will only include these specified products.
[wopb_wishlist ids="1,2,3" /]Combining both parameters to display a custom message and specific products in the wishlist.
[wopb_wishlist message="Here are your favorite products!" ids="1,2,3" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wopb_wishlist] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wopb_wishlist', array($this, 'wishlist_shortcode_callback'));Shortcode PHP function:
function wishlist_shortcode_callback($message = '', $ids = array()) {
$html = '';
$wishlist_data = empty($ids) ? wopb_function()->get_wishlist_id() : $ids;
if (count($wishlist_data) > 0) {
$redirect_cart = wopb_function()->get_setting('wishlist_redirect_cart');
$wishlist_empty = wopb_function()->get_setting('wishlist_empty');
$wishlist_page = wopb_function()->get_setting('wishlist_page');
$wishlist_page = $wishlist_page ? get_permalink($wishlist_page) : '#';
$wishlist_action_added = wopb_function()->get_setting('wishlist_action_added');
$html .= '<div class="' . 'wopb-modal-content wopb-wishlist-modal-content' . (empty($post_id) ? ' wopb-wishlist-shortcode' : '') . '">';
$html .= '<div class="wopb-wishlist-modal">';
if ($message) {
$html .= esc_html($message);
} else {
$html .= '<table>';
$html .= '<thead>';
$html .= '<tr>';
$html .= '<th class="wopb-wishlist-product-remove"> </th>';
$html .= '<th class="wopb-wishlist-product-image">'.esc_html__('Image', 'product-blocks').'</th>';
$html .= '<th class="wopb-wishlist-product-name">'.esc_html__('Name', 'product-blocks').'</th>';
$html .= '<th class="wopb-wishlist-product-price">'.esc_html__('Price', 'product-blocks').'</th>';
$html .= '<th class="wopb-wishlist-product-action">'.esc_html__('Action', 'product-blocks').'</th>';
$html .= '<th class="wopb-modal-close"></th>';
$html .= '</tr>';
$html .= '</thead>';
$html .= '<tbody>';
foreach ($wishlist_data as $val) {
$product = wc_get_product($val);
if ($product) {
$link = get_permalink($val);
$html .= '<tr>';
$html .= '<td><a class="wopb-wishlist-remove" data-action="remove" href="#" data-postid="'.esc_attr($product->get_id()).'">×</a></td>';
$html .= '<td class="wopb-wishlist-product-image">';
$thumbnail = apply_filters( 'single_product_archive_thumbnail_size', 'woocommerce_thumbnail' );
if ( $thumbnail ) {
$html .= sprintf( '<a href="%s">%s</a>', esc_url( $link ), $product->get_image('thumbnail') );
}
$html .= '</td>';
$html .= '<td class="wopb-wishlist-product-name"><a href="'.esc_url($link).'">'.$product->get_title().'</a></td>';
$html .= '<td class="wopb-wishlist-product-price">'.wp_kses_post($product->get_price_html()).'</td>';
if ( $product->is_in_stock() ) {
$html .= '<td class="wopb-wishlist-product-action"><span class="wopb-wishlist-product-stock">'.( $product->is_in_stock() ? esc_html__('In Stock', 'product-blocks') : esc_html__('Stock', 'product-blocks') ).'</span><span class="wopb-wishlist-cart-added" data-action="cart_remove" '.($redirect_cart ? 'data-redirect="'.esc_url(wc_get_cart_url()).'"' : '').' data-postid="'.esc_attr($product->get_id()).'">'.do_shortcode('[add_to_cart id="'.esc_attr($val).'" show_price="false"]').'</span></td>';
} else {
$html .= '<td class="wopb-wishlist-product-action"><span class="wopb-wishlist-product-stock">'.( $product->is_in_stock() ? esc_html__('In Stock', 'product-blocks') : esc_html__('Stock', 'product-blocks') ).'</span>'.do_shortcode('[add_to_cart id="'.esc_attr($val).'" show_price="false"]').'</td>';
}
$html .= '</tr>';
}
}
$html .= '</tbody>';
$html .= '</table>';
}
$html .= '<div class="wopb-wishlist-product-footer">';
$html .= '<span><a href="'.esc_url($wishlist_page).'">'.esc_html__('Open Wishlist Page', 'product-blocks').'</a></span>';
$html .= '<span><a href="#" class="wopb-wishlist-cart-added" data-action="cart_remove_all" '.($redirect_cart ? 'data-redirect="'.esc_url(wc_get_cart_url()).'"' : '').' data-postid="'.implode(",",$wishlist_data).'">'.esc_html__('Add All To Cart', 'product-blocks').'</a></span>';
$html .= '<span><a class="wopb-modal-continue" href="'.( $wishlist_action_added == 'redirect' ? esc_url(wp_get_referer()) : '#' ).'">'.esc_html__('Continue Shopping', 'product-blocks').'</span>';
$html .= '</div>';
$html .= '</div>';//wopb-modal-content
$html .= '</div>';//wopb-modal-content
}
else {
$html .= '<h3>'. __('Your Wishlist is empty.', 'product-blocks') .'</h3>';
$html .= '<span><a class="wopb-modal-continue" href="'.( wopb_function()->get_setting('wishlist_action_added') == 'redirect' ? esc_url(wp_get_referer()) : '#' ).'">'.esc_html__('Continue Shopping', 'product-blocks').'</span>';
}
return $html;
}
Code file location:
product-blocks/product-blocks/addons/wishlist/Wishlist.phpConclusion
Now that you’ve learned how to embed the ProductX 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