Installation

Automatic installation

Automatic installation is the quickest and least technical way to get Shop Page WP installed.

  1. Go to your WordPress admin area and select Plugins -> Add new from the menu.
  2. Search for “Shop Page WP”.
  3. Click “Install Now”.
  4. Click “Activate”.

Manual installation

Manually installing the Shop Page WP plugin requires that you download the zip file from the WordPress

  1. Unzip the plugin archive on your computer.
  2. Upload shop-page-wp directory to the /wp-content/plugins/ directory via FTP.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. Go to Shop Page WP in your WordPress dashboard to begin adding products.

Basic Setup

To setup the plugin after it is installed, you will just need to create a “Shop” page and add as little as one product.

Create a Shop Page

You can either create a new or use an existing page as your Shop page. In this example, we will be creating a new page.

  1. From the WordPress admin; hover over “Pages” and click “Add New.”
  2. Set a page name.
  3. Paste in the Shop Page WP Shortcode to display a grid of all the products that you will add.[shop-page-wp]
  4. Publish the page and add it to your navigation.

Add Products

  1. Hover over “Shop Page WP” from the WordPress admin, and click “Add New Product”
  2. Enter a the product title, product affiliate URL (the link to buy the product), enter a product description (optional), select or add a product category, and upload a product image.
    * Products must be assigned a category in order to display on the shop page

Order of Products

  1. You can change the order in which products display on the shop page by using a plugin. We recommend using Intuitive Custom Post Order plugin.
  2. Once Intuitive Custom Post Order plugin is installed, you will need to go into the Settings > Intuitive CPO, and select “Shop Page WP” as a sortable post type.
  3. You can then drag to re-order your products from the Shop Page WP products list in the WordPress admin.

Shortcode Usage

Default shortcode.

This will output a grid with every product you’ve added.
[shop-page-wp]

Specific Category

Show only products from one category. You may use either the category slug or the category name.

[shop-page-wp category='Electronics']

Multiple Specific Category

Show products from multiple categories (separated by a comma). You may use either the category slug or the category name.
[shop-page-wp category='Electronics|Games|New Products']

Custom Number of Columns

Specify number of columns in the product grid (will override default settings). Options are 1, 2, 3 or 4.
[shop-page-wp grid='3']

Specify Product ID (will override categories)

Specify maximum number of products to display.
[shop-page-wp id=’17,18′]

Max Number of Products to Display

Specify maximum number of products to display.
[shop-page-wp max_number='2']

Gutenberg Block Usage

Insert a Shop Page WP product grid in the Gutenberg editor by clicking on the “+” to Add block. Either search for “Shop Page” or scroll to the widgets block category and select the Shop Page WP block.

The settings for number of columns, categories to display and maximum number of products to display are optional. If left blank, all products will display in the grid.

To display categories separately on the page; add multiple blocks and insert a heading with the desired text above each.

Widget Area

To add products to a widget area just drag the Shop Page WP widget into a Widget Area. You can then set the number of columns and categories (separated by a comma), maximum number of products to display, and optionally add a title for the widget section.

Plugin Settings

The plugin setting allow you to customize elements of the product display on your shop page.

Button Text: The text that displays on the product’s call to action button. Example: Buy On Amazon
Custom button text can be added on individual products.

Choose Default Styles: This gives you the option to remove the plugin’s styling. It is recommended that the “Default Styles’ setting is used unless you run into a conflict with your theme.

Default Number of Columns: Specify the default number of columns for your product grid (1, 2, 3 or 4 columns).

Open Link in New Tab: Choose whether to open product links in a new tab or the current tab. It is a recommended best practice to open external links in a new tab, and internal links (within your site) in the current tab.

Custom Image Size Settings: The default image size is 300px x 300px. This setting allows you to customize the image size for the shop page grid.
Note: If you do enter a custom image size, you will then need to run the “Regenerate Thumbnails” plugin to update the image size.

You can select to either crop the images to your exact dimensions, or to only resize without cropping.

Product Image Template: You can download our 300 x 300 px product image Photoshop PSD template for creating your product images.

Support

Feel free to reach out with any questions, feedback or support needs via email to hello@shoppagewp.com.