WP Shopify Shortcodes

Below, you’ll find a detailed guide on how to add the WP Shopify 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 WP Shopify Plugin shortcodes not to show or not to work correctly.

Before starting, here is an overview of the WP Shopify Plugin and the shortcodes it provides:

Plugin Icon
WP Shopify

"WP Shopify is a powerful plugin that enables WordPress users to effortlessly integrate their Shopify store within their website. The plugin promises seamless syncing of products and easy customization."

★★★★★ (2) Active Installs: 2000+ Tested with: 6.3.2 PHP Version: false
Included Shortcodes:
  • [wp-shopify]
  • [wp-shopify-product]

WP Shopify [wp-shopify] Shortcode

The WP-Shopify shortcode allows the display of Shopify products on a WordPress site. It fetches product data using GraphQL and displays it using PHP. The shortcode supports multiple attributes like ‘type’, ‘limit’, ‘id’, ‘searchfilter’, and ‘thumb-size’. It can display products from a specific collection or all products. The ‘limit’ attribute controls the number of products shown, while ‘searchfilter’ enables a product search bar. The ‘thumb-size’ attribute adjusts the product image size. The shortcode also generates product URLs based on the ‘url-type’ attribute. It supports both local WordPress and Shopify URLs.

Shortcode: [wp-shopify]

Parameters

Here is a list of all possible wp-shopify shortcode parameters and attributes:

  • url-type – determines the type of product URL used, either local or Shopify’s.
  • type – identifies what type of Shopify data to display, such as ‘collection’.
  • limit – sets a maximum number of Shopify items to display.
  • id – specifies a particular Shopify collection by its unique identifier.
  • searchfilter – if set to ‘yes’, a search filter bar is displayed.
  • thumb-size – manages the size of the product thumbnail image.

Examples and Usage

Basic example – Display the default Shopify products on a page using the WP Shopify plugin shortcode.

[wp-shopify]

Advanced examples

Display a specific collection of products by using the ‘type’ and ‘id’ parameters. In this example, the ‘type’ is set to ‘collection’ and the ‘id’ is set to ‘123’ which should correspond to the ID of a specific collection in your Shopify store.

[wp-shopify type="collection" id="123"]

Limit the number of products displayed by using the ‘limit’ parameter. In this example, only the first 5 products will be displayed.

[wp-shopify limit="5"]

Include a search filter bar in the product display by setting the ‘searchfilter’ parameter to ‘yes’.

[wp-shopify searchfilter="yes"]

Change the size of the product thumbnails by using the ‘thumb-size’ parameter. In this example, the thumbnails are set to a custom size of ‘large’.

[wp-shopify thumb-size="large"]

Change the type of URL used for the product links by using the ‘url-type’ parameter. In this example, the ‘url-type’ is set to ‘shopify’, which means the product links will direct to the Shopify store instead of the WordPress site.

[wp-shopify url-type="shopify"]

PHP Function Code

In case you have difficulties debugging what causing issues with [wp-shopify] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('wp-shopify', 'wpsy_shop_display_shortcode');

Shortcode PHP function:

function wpsy_shop_display_shortcode($atts = array(), $content = null, $tag = ''){
		
		$atts = array_change_key_case((array)$atts, CASE_LOWER);
		
		$url_type = (isset($atts['url-type'])?$atts['url-type']:'default');
		$type = (isset($atts['type'])?$atts['type']:'');
		$wpsy_limit = (isset($atts['limit'])?$atts['limit']:'');
		$id = trim(isset($atts['id'])?$atts['id']:'');
		$searchfilter = (isset($atts['searchfilter']) && $atts['searchfilter']=='yes'?true:false);
		$thumb_size = (isset($atts['thumb-size'])?$atts['thumb-size']:'default');
		
		ob_start();
		
		if($searchfilter){
			wpsy_shop_filter_bar();
		}
		 
		switch($type){
			default:		
				$query_params = array('query'=>'products');
				$store_data = wpsy_graphql_central($query_params, true);
				$store_data = (!empty($store_data)?$store_data->products->edges:array());
			break;
			case 'collection':		
				if($id){					
					$query_params = array('query'=>'collection', 'id'=>$id, 'limit'=>$wpsy_limit);
					$store_data = wpsy_graphql_central($query_params, true);

					$store_collection = (is_object($store_data) && !empty($store_data)?$store_data->collection:array());
					
					if(!empty($store_collection)){
?>
<div class="wpsy-collection" id="<?php echo $store_collection->id; ?>">
	<h2><?php echo $store_collection->title; ?></h2>
    <?php if($store_collection->image->url): ?>
    <p style="margin:20px 0 0 0; padding:0"><img src="<?php echo $store_collection->image->url; ?>" style="height:200px; width:auto; float:left; margin:10px 20px 0 0;" /><?php echo $store_collection->descriptionHtml; ?></p>
    <?php endif; ?>
</div>
<?php					
					}
					
					$store_data = (is_object($store_collection) && !empty($store_collection)?$store_collection->products->edges:array());
					
					
				}
				
			break;
		}
		

	
	
	  
	   if(!empty($store_data)){
		   
		   
	?>
	<ul class="wp_shopify">
	<?php	   
			$wpsy_count = 0;
			
			foreach($store_data as $product_data){
				
				$product_data = $product_data->node;

				
				
				if (is_numeric($wpsy_limit) && $wpsy_limit>=0 && $wpsy_count >= $wpsy_limit){
					continue;	
				}
				$wpsy_count++;
			   	
				$product_data->price = wpsy_product_price($product_data);
				$attribs = array(				
									'title="'.ucwords($product_data->productType).'"',
							);
				
				switch($url_type){
					default:
						$product_url = home_url().'/product/?id='.basename($product_data->id);
					break;
					case 'shopify':
						$product_url = $product_data->onlineStoreUrl;
						$attribs[] = 'target="_blank" rel="nofollow" aria-label="'.$product_data->title.' '.__('(Opens in a new window)', 'wp-shopify');
					break;
				}

				$featuredImage = $product_data->featuredImage->url;
				
				switch($thumb_size){
					default:
						$extension_pos = strrpos($featuredImage, '.');
						$featuredImage = substr($featuredImage, 0, $extension_pos) . '_'.$thumb_size.'x' . substr($featuredImage, $extension_pos);
					break;
					case 'default':
					
					break;
				}
				
				$attribs[] = 'href="'.$product_url.'"';
				
				
				
	?>
	<li>
	<a <?php echo implode(' ', $attribs); ?>><img alt="<?php echo $product_data->title; ?>" src="<?php echo $featuredImage; ?>" /></a>
	<a class="ptitle" <?php echo implode(' ', $attribs); ?>><?php echo $product_data->title; ?></a>
	<strong><?php echo $product_data->price; ?></strong>
    <div style="display:none"><?php echo $product_data->description; ?></div>
	</li>
	<?php		   
		   }
	?>
	</ul>
	<?php	   


		$o = ob_get_contents();
		
		ob_end_clean();
		   
	   }
	   
	   return $o;
	}

Code file location:

wp-shopify/wp-shopify/inc/functions.php

WP Shopify [wp-shopify-product] Shortcode

The WP-Shopify shortcode allows you to display specific product details on your WordPress site. It retrieves product data from your Shopify store, including the name, price, image, and description.

Shortcode: [wp-shopify-product]

Parameters

Here is a list of all possible wp-shopify-product shortcode parameters and attributes:

  • id – The unique identifier of the product.
  • template – Defines the layout of the product display, ‘default’ if not specified.
  • button_type – Determines the type of button, ‘default’ if not specified.
  • shop_link – The link to the shop, home page’s shop url if not specified.
  • description – Controls whether to display product description, ‘true’ means show.

Examples and Usage

Basic example – Showcases the shortcode to display a specific product from the WP Shopify store by referencing the product’s ID.

[wp-shopify-product id=123 /]

Advanced examples

Using the shortcode to display a specific product with a custom template, and the buy button type. The product will load by ID, and the custom template will be used for product layout. The button type will determine the style of the buy button.

[wp-shopify-product id=123 template="custom_template" button_type="rounded" /]

Using the shortcode to display a specific product with a custom shop link and description. The product will load by ID, the custom shop link will be used as the product’s link, and the description will be displayed according to the provided value.

[wp-shopify-product id=123 shop_link="https://your_custom_shop_link.com" description="false" /]

Using the shortcode to display a specific product with all parameters. The product will load by ID, the custom template will be used for product layout, the button type will determine the style of the buy button, the custom shop link will be used as the product’s link, and the description will be displayed according to the provided value.

[wp-shopify-product id=123 template="custom_template" button_type="rounded" shop_link="https://your_custom_shop_link.com" description="false" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [wp-shopify-product] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('wp-shopify-product', 'wpsy_shop_product_display_shortcode');

Shortcode PHP function:

function wpsy_shop_product_display_shortcode($atts = array(), $content = null, $tag = ''){
		
		if(is_admin()){ return; }

		global $wpsy_pro;
		// normalize attribute keys, lowercase
		$atts = array_change_key_case((array)$atts, CASE_LOWER);
		$wpsy_db_data = get_option('wpsy_db_data');
		
		$id = (isset($atts['id'])?$atts['id']:$_GET['id']);
		$template = (isset($atts['template'])?$atts['template']:'default');
		$button_type = (isset($atts['button_type'])?$atts['button_type']:'default');
		$shop_link = (isset($atts['shop_link'])?$atts['shop_link']:home_url('shop'));
		$description = (isset($atts['description'])?$atts['description']:'true');
		
		$store_data = wpsy_graphql_central(array('query'=>'product', 'id'=>$id), true);
		
		
		$images = $store_data->product->images;
	
		$data['name'] = ' ';
		$data['price'] = ' ';
		$data['special'] = ' ';
		$data['link'] = ' ';
		$data['image'] = ' ';
		$data['description'] = ' ';
		$data['variations'] = array();
		
		// Fill from response
		$data['name'] = sanitize_text_field($store_data->product->title);
		
		// show lowest price
		if(!empty($store_data->product->priceRange)){
			foreach($store_data->product->priceRange as $variant) { 
			  if (!isset($price)) {
				 $price = $variant->amount; 
			  } else {
				 if ($variant->amount < $price) $price = $variant->amount; 
			  }
			}
		}
		$data['price'] = wpsy_product_price($store_data->product);
		// field contains HTML markup
		switch($description){
			case 'yes':
			case '1':
			case 'true':
			case 'enable':
			case 'show':
			case 'display':
				$data['description'] = wp_kses_post($store_data->product->descriptionHtml);
			break;
		}
		$image_url = esc_url($store_data->product->featuredImage->url); 
		$data['image'] = '<img data-src="'.$image_url.'" src="' . sanitize_text_field($image_url) . '" />';
		$data['link'] = "https://" . $wpsy_db_data['wpsy_url'] . "/products/" . sanitize_text_field($store_data->product->handle);
		
		// start output
		$o = '';
		
		if($wpsy_pro && $template!='' && $template!='default'){
			
			if(!empty($store_data->product->variants)){
				foreach($store_data->product->variants->edges as $variant) { 
					$node = $variant->node;
					$variant_id = basename($node->id);
					$data['variations'][$variant_id] = $node;
				}
			}
			//pree($data);exit;
			
			$template_file = WPSY_PLUGIN_DIR.'/pro/templates/'.$template.'.php';
			

			$template_css_file = WPSY_PLUGIN_DIR.'/pro/templates/css/'.$template.'.css';
			$template_css_file = (file_exists($template_css_file)?$template_css_file:'');

			$template_js_file = WPSY_PLUGIN_DIR.'/pro/templates/js/'.$template.'.js';
			$template_js_file = (file_exists($template_js_file)?$template_js_file:'');
			
			if(file_exists($template_file)){
				ob_start();
				
				include_once($template_file);
				
				$o = ob_get_contents();
				
				
				ob_end_clean();
			}
		}else{
		
			// start box
			$o .= '<div class="wp_shopify_product">';
			
			$o .= '<div class="prod-left">' . '<a href="' . $data['link'] . '">' . $data['image'] . '</a>' . '';
	
			if(!empty($images)){
				$o .= '<div class="prod-gallery">' . '<ul>';
				foreach($images->edges as $nodes){
					foreach($nodes as $node){
						if($node->url!=$image_url){
							$o .= '<li><a href="' . $node->url . '"><img src="'.$node->url.'" /></a>' . '</li>';
						}
					}
				}
				$o .= '</ul></div>';
			}
			
			$o .= '</div>';
			
			$o .= '<div class="prod-upper">';
			$o .= '<div class="prod-right">' . '<a target="_blank" aria-label="' . $data['name'] . ' (Opens in a new window)" href="' . $data['link'] . '"><h3>' . $data['name'] . '</h3></a>' . '<br />';
			$o .= '<div class="prod-price">' .$data['price']. '</div>';
			$o .= '<div class="prod-buy"><a href="' . $data['link'] . '" target="_blank" aria-label="' . $data['name'] . ' (Opens in a new window)"><img src="'.plugins_url( 'images/btn.png', dirname(__FILE__) ).'" /></a></div>';
			$o .= '</div>';//prod-right
			$o .= '</div>';//prod-upper
			$o .= '<div class="prod-clear"></div>';
			$o .= '<div class="prod-desc">' . $data['description'] . '</div>';
			
			// enclosing tags
			if (!is_null($content)) {
			  // secure output by executing the_content filter hook on $content
			  $o .= apply_filters('the_content', $content);
			
			  // run shortcode parser recursively
			  $o .= do_shortcode($content);
			}
			
			// end box
			$o .= '</div>';
			
		}
		
		// return output
		return $o;
	}

Code file location:

wp-shopify/wp-shopify/inc/functions.php

Conclusion

Now that you’ve learned how to embed the WP Shopify 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.

Comments

Leave a Reply

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