WC Pickup Store Shortcode

Below, you’ll find a detailed guide on how to add the WC Pickup Store Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WC Pickup Store Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the WC Pickup Store Plugin and the shortcodes it provides:

WC Pickup Store

"WC Pickup Store is a seamless WordPress plugin that allows customers to pick up their online purchases from a physical store location. It's a vital tool for eCommerce sites."

★★★★☆ (19) Active Installs: 3000+ Tested with: 6.2.0 PHP Version: false

Included Shortcodes:

• [vc_wps_store]

WC Pickup Store [vc_wps_store] Shortcode

The wc-pickup-store shortcode is a versatile tool for displaying store details on your WordPress site. It extracts parameters such as layout, icon color and background, and store image size. It also allows you to specify the number of stores to show and their order. If specific post IDs are provided, it will only display those posts. The shortcode fetches store details like city, direction, phone, description, and Waze link. It then incorporates these into your chosen layout.

Shortcode: [vc_wps_store]

Parameters

Here is a list of all possible vc_wps_store shortcode parameters and attributes:

• store_icon_background – sets the background color of the store icon
• store_icon_color – sets the color of the store icon
• stores_layout – determines the layout of the stores, either list or grid
• stores_per_row – defines the number of stores displayed per row in the grid
• store_image_size – sets the size of the store images
• show – determines the number of stores to show
• post_ids – specifies the IDs of the posts to include
• store_direction – enables or disables the display of the store direction
• store_phone – enables or disables the display of the store phone number
• store_description – enables or disables the display of the store description
• store_waze_link – enables or disables the display of the store Waze link

Examples and Usage

Basic example – A simple usage of the shortcode to display a list of stores.

[vc_wps_store show=3 /]

Advanced examples

Utilizing the shortcode to display a grid layout of stores with a specific number of stores per row. The shortcode also specifies the store icon color and background.

[vc_wps_store stores_layout='grid' stores_per_row=3 store_icon_color='#000' store_icon_background='#fff' /]

Using the shortcode to display stores with specific IDs in a list layout. The shortcode also sets the size of the store image.

[vc_wps_store post_ids='1,2,3' store_image_size='300x200' /]

Employing the shortcode to display a defined number of stores ordered by their post IDs. The shortcode also includes the store direction, phone number, description, and Waze link.

[vc_wps_store show=5 post_ids='1,2,3,4,5' store_direction=true store_phone=true store_description=true store_waze_link=true /]

PHP Function Code

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

Shortcode line:

add_shortcode('vc_wps_store', array($this, 'vc_wps_store_html'));

Shortcode PHP function:

function vc_wps_store_html($atts) {
			// Params extraction
			extract( $atts );
			$layout = 'layout-list';
			$icon_background = (!empty($atts['store_icon_background'])) ? 'style="background: ' . $atts['store_icon_background'] . '"' : '';
			$icon_color = (!empty($atts['store_icon_color'])) ? 'style="color: ' . $atts['store_icon_color'] . '"' : '';

			if(!empty($atts['stores_layout']) && !empty($atts['stores_per_row'])) {
				$layout = 'layout-grid col-layout-' . $atts['stores_per_row'];
			} elseif(!empty($atts['stores_layout'])) {
				$layout = 'layout-grid';
			}

			$image_size = explode('x', strtolower($atts['store_image_size']));
			if(!empty($image_size[1])) {
				$store_image_size = $image_size;
			} else {
				$store_image_size = $image_size[0];
			}

			$query_args = array(
				'post_type' => 'store',
				'posts_per_page' => $atts['show'],
				'order' => 'DESC',
				'orderby' => 'date',
			);

			if(!empty($atts['post_ids'])) {
				$query_args['orderby'] = 'post__in';
				$query_args['post__in'] = explode(',', $atts['post_ids']);
			}

			$template_file = wps_locate_template('wrapper-vc_stores.php');
			ob_start();
			$query = new WP_Query($query_args);
			if($query->have_posts() && $template_file) :
				?>
				<div class="stores-container <?= $layout ?>">
					<?php
						while ( $query->have_posts() ) : $query->the_post();
							// global $post;
							$store_id = get_the_ID();
							$store_city = sanitize_text_field(wps_get_post_meta($store_id, 'city'));
							$store_direction = (!empty($atts['store_direction'])) ? wp_kses_post(wps_get_post_meta($store_id, 'address')) : '';
							$store_phone = (!empty($atts['store_phone'])) ? sanitize_text_field(wps_get_post_meta($store_id, 'phone')) : '';
							$store_description = (!empty($atts['store_description'])) ? wp_kses_post(wps_get_post_meta($store_id, 'description')) : '';
							$store_waze_link = (!empty($atts['store_waze_link'])) ? esc_url(wps_get_post_meta($store_id, 'waze')) : '';
					
							include $template_file;

						endwhile;
						wp_reset_postdata();
					?>
				</div>
				<?php
			endif;

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

Code file location:

wc-pickup-store/wc-pickup-store/includes/integrations/class-vc_stores.php

Conclusion

Now that you’ve learned how to embed the WC Pickup Store Plugin shortcode, 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.