Tabbed Content

I have tried several times to change the shortcode to show specific products and specific categories by using all the tricks below...what am I doing wrong?


News Show Pro as a shortcode

Our News Show Pro widget for WordPress has long been an excellent way to create product and article showcases; its extensive options allow for link previews, images with article overlays, titles and news snippets, all pulled from the source of your choice, whether your latest posts, latest posts in a specific category, specific posts, or WooCommerce products and categories.

However, as it was a widget, it had to be manually placed and configured after theme installation, or you needed to use our quickstart package to create a new installation of WordPress with the widgets already configured.

Our new page-based frontpage, introduced with StoreFront, allows News Show Pro to be embedded on a page via a shortcode, with all the options and flexibility that you’ve come to expect. This means that the settings from our demo page can be imported or replicated in moments for quick, comfortable configuration. Every option usually found in the widget options may be defined in the shortcode; any options not directly specified will be left at their default values.
How do I display my WooCommerce products on the frontpage like in the demo for StoreFront?

Before proceeding you should ensure you are familiar with how to create the layout of the tabs on the demo frontpage; a guide to this may be found here.

Once you have created your tab pages, you need to add the shortcode that will display News Show Pro. The basic shortcode, that will display images of your most-recently added products with title, pricing and an ‘ADD TO CART’ button may be displayed using the following shortcode:

[gknsp cache_time="0" widget_css_suffix="products" article_cols="4" article_rows="2" data_source_type="wp_woocommerce-wooc_latest" article_text_state="off" article_image_w="282" article_image_h="300" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_format="{PRICE}{CART}" article_readmore_state="off" article_block_padding="10px 30px 30px 30px"]

The majority of the options in the shortcode do not need to be changed, so you can leave them as they are. However, you may wish to change the ‘data_source_type’ attribute to point to a specific category or SKUs (the basic configuration above will take all new products from all categories). To do so, follow the below instructions:
Displaying specific products only

To display only products that you specify, change the attribute from:

data_source_type=“wp_woocommerce-wooc_latest”

to:

data_source_type=“wp_woocommerce-wooc_post”

This tells NSP to take specific articles. Now, you’ll need to define the products you want to show. After the data_source_type attribute in the shortcode, add the following new attribute:

data_source=“sku-code1,sku-code2”

Where the ’sku-code’ is the SKU code for the product(s) in WooCommerce. Our amended shortcode may look like this :

[gknsp cache_time="0" widget_css_suffix="products" article_cols="4" article_rows="2" data_source_type="wp_woocommerce-wooc_post” data_source=“slim-shirt,bright-shirt” article_text_state="off" article_image_w="282" article_image_h="300" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_format="{PRICE}{CART}" article_readmore_state="off" article_block_padding="10px 30px 30px 30px"]

Displaying latest products from a category

To display the latest products from a specific category only, which is very useful if you want to have multiple tabs each with a different selection of products, you should change the data_source_type attribute to:

data_source_type="wp_woocommerce-wooc_category"

This will tell News Show Pro to take details from categories. To specify which categories, add the following attribute to the shortcode:

woocommerce_category_list=“X“

Where ‘X’ is the category ID(s) (found in the category URL) from WooCommerce, separated by a comma if there is more than one. To find the category ID, in your WordPress backend click on Products>Categories on the menu on the left of the screen, and click on the category you wish to display. Once on the category page in your backend, check the URL; you should see something similar to:

http://www.yoursite.com/wp-admin/edit-t ... pe=product

Notice that part of the URL is “ID=99”; the number that appears after the equals sign is the category ID. So in this example, the category would be “99”, and our amended code will look something like this:

[gknsp cache_time="0" widget_css_suffix="products" article_cols="4" article_rows="2" data_source_type="wp_woocommerce-wooc_category” woocommerce_category_list=“99” article_text_state="off" article_image_w="282" article_image_h="300" article_image_order="1" article_image_popup="off" article_title_order="2" article_info_format="{PRICE}{CART}" article_readmore_state="off" article_block_padding="10px 30px 30px 30px"]

Hi,
Could you please provide me with a URL to your website and back-end access via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Hi,

I've checked your --News page shortcode and it works properly, but please use always "text editor" if you are editing the shortcode and check your quotation marks (it were wrong)