Ecwid plugin for WordPress allows adding store components to your site pages or blog posts. You can add your product catalog, a certain category or a single product.
The easiest way to add them is to use the built-in "Store" and "Product" blocks in the WordPress editor. Here you can find an instruction on how to install the Ecwid plugin: Adding your Ecwid store to a Wordpress site.
But if you prefer WordPress shortcodes, those are also available. Here is the complete list of shortcodes and their parameters available in the plugin.
In this article:
[ecwid] shortcode inserts the whole storefront on a page.
The code looks like this:
[ecwid widgets="productbrowser search categories" default_category_id="CATEGORY_ID"
The code consists of several parameters. Each parameter sets what elements should display. By default, the product browser (your product catalog) is displayed. But you can add a search box and a categories menu on top of it.
- widgets — allow setting the the elements displayed on the store page. The values can be used separately or in combination. To add a list of products use the value productbrowser. The productbrowser value is required.
To add a list of products and a search bar use productbrowser, search. The code to add products and a search bar will be the following:
[ecwid widgets="productbrowser search"]
To add products, a search bar and categoriesuse values productbrowser, search, categories.
[ecwid widgets="productbrowser search categories"]
- default_category_id — sets the category appearing on the store page for a visitors who open the page for the first time. This feature is useful when you want to display some specific category on the store home page.
- default_product_id — like 'default_category_id', this parameter allows you to open some product by default when the store page is opened.
- lang — sets the language of the storefront. Regularly, you don't need this parameter because Ecwid detects and enables appropriate language based on the customer's browser settings. More information about Ecwid automatic translations: Ecwid Translations
One can use this parameter when building a multi-language site with different languages on separate site pages. When the language is defined in the code the store won't be translated automatically. To make a multi-language website create several tabs, let's say they will be named as "Store" (en), "Tienda" (es) and "Laden" (de). Then add the Ecwid code and define a language for it. Here is an example of the code to add a store in German.
[ecwid widgets="productbrowser search" lang=de]
Find a list of short codes for language names here: List of ISO 639-2 codes Use the values in '639-1' column.
To add a certain store category to a page, use the [ecwid] shortcode with ‘default_category_id’ parameter as described above.
[ecwid_product] shortcode inserts a single product with a buy now button into a page or post.
Here is the code to add a product:
[ecwid_product id="PRODUCT_ID" display="picture title price options qty addtobag" version="2" show_border="1" show_price_on_button="1" center_align="1"]
- id— product ID (required). Indicate the ID of a product you want to add. See how to find a product ID here: How to get the ID of your product or category
- display— sets what parts of a widget to display. Allowed values: picture, title, price, qty, options, addtobag. A minimum viable set is ''addtobag" — this will display a buy now button without product picture or price. Here is an example of a plain Buy Now button.
When picture, title, price, qty, options are used the single product will look this way:
- show_border — sets whether the widget border should be visible or not. Set ="0" for not visible and ="1" for visible.
- show_price_on_button — whether the price should be displayed within the buy now button or separately. Set ="0" for showing the price on the button and ="1" for shwoing it separately.
- center_align — allows to center-align the product block on a page (0/1). We recommend setting this as 0 when you place several products in a row.
Mind that these shortcodes are designed to support the basic appearance settings of an online store. To customize the storefront in a more advanced way, see this article here: Customizing design of your Ecwid store on a Wordpress site
In case you want to add a separate shopping cart widget, follow the steps described here: Adding Shopping Bag to your Ecwid store