Storycle

WooCommerce Integration

This section defines WooCommerce Integration.

WooCommerce Shortcodes Support

In addition to all the abovementioned features, the template supports all Woocommerce Shortcodes. You simply need to add the content to the shortcode inside the posts and pages to add the elements. In this way, you can save yourself a great deal of time.

Cart

[woocommerce_cart]

This shortcode is used to display the cart contents and interface for coupon codes and other cart bits and pieces.

Checkout

[woocommerce_checkout]

This shortcode should be used on a checkout page only and indicates the checkout process.

Order Tracking Form

[woocommerce_order_tracking]

This shortcode gives users the status of an order. To view it one needs to enter his order details.

My Account

[recent_products per_page="12" columns="4"]

Shows "My account" section where the customer can view the previous orders and update information. You can specify the number or orders to show, it’s set by default to 15 (use -1 to display all orders.)

Args:

array (
		'current_user' => '',
		'order_count' => '15'
)

Recent Products

[recent_products per_page="12" columns="4"]

Recent products list is useful on the homepage. The "per_page" shortcode determines how many products there are to show on the page.

The columns attribute controls how many columns wide the products should be before wrapping.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'date',
		'order' => 'desc'
)

Featured Products

[featured_products per_page="12" columns="4"]

Works the same as the Recent Products but displays the products that have been set as “featured.” In this example, the shortcode defines the number of products and columns to be displayed.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'date',
		'order' => 'desc'
) 

Product

[product id="99"]

[product sku="FOO"]

Use these shortcodes to display products using product ID number or SKU.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'date',
		'order' => 'desc'
)

To find out the Product ID, navigate to the Products screen, hover over the product and locate the ID number in the line at the bottom of the page.

Products

[products ids="1, 2, 3, 4, 5"]

[products skus="foo, bar, baz" orderby="date" order="desc"]

Use these shortcodes to display multiple products using product ID number or SKU.

Args:

array (
		'columns' => '4',
		'orderby' => 'title',
		'order' => 'asc'
)

Add to Cart

[add_to_cart id="99"]

Show the price and "Add to cart" button for the single product using its ID number.

Args:

array (
		'id' => '99',
		'style' => 'border:4px solid #ccc; padding: 12px;',
		'sku' => 'FOO'
) 

Add to Cart URL

[add_to_cart_url id="99"]

Echo the URL on the "Add to Cart" button for a single product using its ID number.

Args:

array (
		'id' => '99',
		'sku' => 'FOO'
) 

Product Page

[product_page id="99"]

[product_page sku="FOO"]

Show full single product page by product ID number or SKU.

Product Category

[product_category category="appliances"]

Show multiple products in a category by slug?

To find out the slug, please, feel free to navigate to "WooCommerce > Products > Categories" and locate the slug column.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'title',
		'order' => 'asc',
		'category' => ''
)

Product Categories

[product_categories number="12" parent="0"]

Use this shortcode to display product categories loop.

Args:

array (
		'number' => 'null',
		'orderby' => 'title',
		'order' => 'ASC',
		'columns' => '4',
		'hide_empty' => '1',
		'parent' => '',
		'ids' => ''
)

Sale Products

[sale_products per_page="12"]

Use this shortcode to display all products on sale in the form of a list.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'title',
		'order' => 'asc'
)

Best-Selling Products

[best_selling_products per_page="12"]

Use this shortcode to display the list the best-selling products on sale.

Args:

array (
		'per_page' => '12',
		'columns' => '4'
)

Top Rated Products

[top_rated_products per_page="12"]

Use this shortcode to display top-rated products on sale.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'title',
		'order' => 'asc'
)

Product Attribute

[product_attribute attribute='color' filter='black']

Use this shortcode to list the products with the certain attributes.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'title',
		'order' => 'asc',
		'attribute' => '',
		'filter' => ''
)

Related Products

[related_products per_page="12"]

Use this shortcode to display the related products.

Args:

array (
		'per_page' => '12',
		'columns' => '4',
		'orderby' => 'title'
)

Messed-Up Shortcodes

If you have pasted your shortcodes correctly, however, the content looks broken on the frontend page, please, make sure you did not embed the shortcode between the tags. This is a common issue. To remove these tags, navigate to page editor, and switch to the Text tab.

Sorting Products Using Custom Meta Fields

In the shortcodes listed below you can choose to order products by the "menu_order", "title", "date", "rand" and "id". To do it use the "orderby" attribute.

• [recent_products]
• [featured_products]
• [products]
• [product_category]
• [sale_products]
• [top_rated_products]
• [product_attribute]
• [related_products]

E.g.,

[products skus=”foo, bar, baz” orderby=”date” order=”desc”]

You can as well sort the products by custom meta fields using the code below (in this example we order products by price).

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );


function woocommerce_shortcode_products_orderby( $args ) {

	$standard_array = array('menu_order','title','date','rand','id');

	if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
		$args['meta_key'] = $args['orderby'];
		$args['orderby']  = 'meta_value_num';
	}

	return $args;
}

You need to paste this snippet in "functions.php" in your theme folder and then customize by editing "meta_key".

WooCommerce website.