Nexvio adds WooCommerce widgets to Elementor. They are listed in the Elementor panel under Nexvio, right after the Pro category.
Requirements: WordPress 5.8+, PHP 7.4+, WooCommerce and Elementor (the free version is enough; Elementor Pro is needed only for Theme Builder templates).
Choose your widgets in Widgets. Disabled widgets are removed from the Elementor panel.
Set the wishlist page in Wishlist (click "Create the page"), then edit it with Elementor and add Wishlist Card (or Wishlist Card Layouts).
Build your templates:
Header: Header Search + Wishlist Icon
Products archive (shop and categories): Product Filter in a sidebar + Products Archive (or Products Archive Layouts)
Single product: Add to Cart + Related Products (or Related Products Layouts)
A carousel of products with the card design (badges, wishlist heart, stock, price, add to cart).
Products: latest, featured, on sale, best sellers or chosen IDs; filter by categories and tags.
Slider: cards visible per device, peek of the next card, arrows (header or sides), dots, loop, mouse drag, autoplay.
Badges: language (product attribute), category, new, sale (percentage), pre-order (tag precommande or backorder).
Background by category: give each category its own colours.
Design Layout (Content tab, first section): pick one of 12 card designs from preview images: Classic Vault, Minimal Light, Image Overlay, Horizontal, Glass, Neon Outline, Elevated Shop, Compact Tiles, Editorial, Price Tag, Spotlight and Boutique. The same picker is in Products Card Layouts, Products Archive Layouts, Related Products Layouts and Wishlist Card Layouts. The colours, image shape and effects of the chosen design are in Style > Layout design; only the controls that apply to that design are shown. You can also choose an icon or text add-to-cart button and show star ratings.
Motion (Slider section): Slide works with arrows, swipe and optional autoplay. Continuous infinite scroll moves the products at a steady speed in an endless loop with no visible restart; set the speed per device, the direction and pause on hover. Arrows and drag / swipe still work in this mode.
Tips: the Horizontal design looks best with 2 or 3 visible cards, Compact Tiles with 5 or 6. Glass is made for colourful or image backgrounds.
A grid of simple product cards: the image on top, then the title, description, price and a full-width button. It uses the same product query, columns and pagination as Products Card Layouts, with one plain design and a short Style tab.
Style > Layout design: card background, border (top, right, bottom, left), text area padding and box shadow.
Content > Hover gallery image: show another picture from the product gallery when the pointer is over the card, with animation effect, duration and easing.
Style > Image: Default, Cover or Contain fit, the image controls (alignment, width, height, opacity, filters, border, radius, shadow) and the image area (shape, space, radius, background).
Style > Card Content: title, description, price and the other product info, each with colour, typography and spacing (top and bottom).
Style > Button (when the button is on): font, normal and gradient background, text colour, icon colour, padding, spacing and border radius (top, right, bottom, left).
Style > Badges: text font, padding, margin and radius for the Category, New, Sale, Pre-order and Language badges. Pagination and the No products message work as in Products Card Layouts.
Products Card Layouts (the Products Grid widget) is a grid of chosen products on any page, with 12 selectable card designs: latest, featured, on sale, best sellers, categories, tags or product IDs.
Its own Design Layout, columns, gaps and pagination, independent from the Products Archive widgets.
Each Products Card Layouts widget uses its own page number in the URL, so several grids on one page paginate separately.
"Products per page" is in the Products (query) section.
The shop and product archive widget with the Products Card design: image on top, then title, description, price and button. Put it in your shop / category template.
It always shows the products of the page being viewed (shop, category, tag, attribute, search) and follows the archive pagination. It is not a fixed grid. In the editor you see recent products as a preview.
It updates with the Product Filter, the Filter Popup and other filter plugins that reload the product list; the cards keep their layout after each update.
Result count and sorting and Run WooCommerce loop hooks (keep on for filter plugins) are in the Content tab. Products per page: Settings > Shop.
The Content and Style tabs are the same as Products Card: layout design, image, card content, button, badges, pagination and gallery hover.
Products Archive Layouts is the product grid with 12 selectable card designs for the shop page and the category / tag / attribute archives, with pagination, result count and sorting.
Use the source Current query in your archive template: the grid shows the products of the page being viewed and works with the Product Filter.
Design Layout (Content tab): the same 12 designs as the Product Slider, with their own settings in Style > Layout design.
View Mode (Content tab): Grid View (cards in rows and columns, columns per device in Grid layout) or List View (image and details side by side). List view has its own settings: image width and shape, price and button in a right column or below, vertical and text alignment, short description, stacking on mobile, and its own spacing, colours and typography in Style > List view.
Turn on Let shoppers switch Grid / List to show two buttons above the products; the choice can be remembered and stays when the filter reloads the products.
An AJAX filter: only the product area reloads, the URL updates (shareable, back button works).
Choose the fields on Nexvio > Filters: click Add a filter field, pick a field (search, price, category, any attribute such as colour or size, tags, availability, on sale, featured, rating), choose how it looks, put the fields in order with the arrows or by dragging, then Save filters. The preview shows the result with your own attributes and categories.
Look: on the same page choose Light or Dark and the main colour. A colour set in a widget\'s Style tab replaces it for that widget.
Attributes: colours show as colour circles, pictures as image circles, sizes as buttons in size order (XS, S, M, L, XL). Set them in Products > Attributes > Configure terms: Swatch colour or Swatch image. Only global attributes (Products > Attributes) can be filtered.
Category can be a list (one category), checkboxes (several), a dropdown or buttons.
Shop fields:Sort by (popularity, rating, newest, price) and Products per page (e.g. 12, 24, 48).
Categories: sub-categories are indented under their category and open with the + button. On a category page its branch opens automatically.
Colours, sizes and spacing of the filter itself are in Elementor (widget > Style). To give one widget its own fields, set Fields to "Set here, for this widget only".
If you use another products widget, set its container in General > Products container.
For shops that don\'t want the filter always visible: visitors see a Filters button; a click slides the filter in from the left (or right).
The fields and the Look are the same as Nexvio > Filters.
Choices are not applied straight away: Apply closes the panel and shows the matching products (without reloading the page). The button shows how many filters are active.
Elementor: button text and icon, side, panel title, Apply / Reset texts, width, slide speed, overlay colour, button colours (normal and hover).
Put it above the products (e.g. next to the result count). The products area is found the same way as for the Product Filter.
A search icon for the header. A click opens a search bar (dropdown or full-width). The search filters the shop by product title, and on a category page it searches inside that category. When the page has a Product Filter, results update without reloading. Press Esc to close.
Related products for the single product page, with the Products Card design. It uses the same query as Related Products Layouts: other products of the same category, most popular first (or best rated, random, newest).
Category used: most specific, primary (Yoast / Rank Math), top-level or all. Fill from the parent category completes a short list.
Show as a slider or a grid; slider and header options are the same as in the Product Slider.
The Style tab is the Products Card one (layout design, image, card content, button, badges) plus the header and slider arrows. Gallery hover is in the Content tab.
Related Products Layouts has 12 selectable card designs. On the product page, it shows other products of the same category, most popular first (or best rated, random, newest).
Category used: most specific (default), primary (Yoast / Rank Math), top-level or all.
"Fill from the parent category" completes the list when the category has few products.
No Elementor Pro? Turn on automatic related products in Settings, or use the shortcode.
' ),
'cart' => array( 'dashicons-cart', 'Add to Cart', '
Quantity selector, "Add to cart" button and wishlist heart for the single product page. Simple products are added with AJAX and the mini-cart updates. Stock, minimum / maximum quantity and "sold individually" are respected. Variable and grouped products use the WooCommerce form, styled to match.
A luxury cart panel that slides in from the right. It uses the real WooCommerce cart: prices, variations, stock limits, coupons, shipping and totals are all calculated by WooCommerce.
Settings:Nexvio > Add to Cart. Choose Light or Dark, pick one main colour (or a ready-made one) and check the live preview. Texts are automatic in your site\'s language; type your own only to replace them.
Adding products: product cards, the Add to Cart widget and product pages (simple and variable products, with their options) add without reloading and open the panel. Double clicks are ignored while a product is being added.
In the panel: change quantities, remove products, apply or remove a coupon, then Proceed to Checkout or View Cart. An empty cart shows a Continue Shopping button that goes to your shop page.
Cart Panel widget: the whole cart shown on a page (for clients who want a cart page instead of, or as well as, the popup), with full control over what is shown and how it looks.
Header Cart widget: icon with a live counter for the header. Floating Cart widget: a button fixed in a bottom corner. Both open the same panel. You can also show a floating cart on every page from the settings, without a widget.
With the side cart turned off, WooCommerce adds to cart exactly as before, and the Header Cart links to the cart page.
The same wishlist page widget (saved products, live removal, empty message) with the 12 selectable card designs of the Product Slider. Pick the design in Content > Design Layout; its colours are in Style > Layout design.
Products Card, Products Archive, Related Products, Wishlist Card and the three Layouts widgets (Products Archive Layouts, Related Products Layouts, Wishlist Card Layouts) can show another picture of the product when the pointer is over the card. Each widget has its own settings in Content > Hover gallery image.
Enable Gallery Image on Hover: off by default. When on, the first image of the WooCommerce product gallery replaces the main image while hovering and the main image returns when the pointer leaves. Products without a gallery image keep their main image. Desktop (mouse) only.
Enable Hover Animation: turn off to swap the images instantly.
Animation Effect: Fade, Zoom In, Zoom Out, Slide (the new image slides in from the right) or None.
Animation Duration: from 100 to 2000 ms.
Animation Easing: Ease, Ease In, Ease Out or Ease In Out.
The three Layouts widgets also have Go through the gallery images while hovering (number of images and time per image).
In every product widget (Slider, Products Card Layouts, Products Archive Layouts, Related Products Layouts, Wishlist Card Layouts): Content > Description & rating. Each widget has its own settings.
Show short description: the product\'s WooCommerce short description, cut to a number of words (0 = all). Products without one show nothing; optionally use the long description instead. Style > Short description: colour, typography, line height, alignment, spacing, maximum lines, and "Same height on every card" to keep prices and buttons lined up.
Show rating: the WooCommerce star rating with the review count (87) or (87 reviews), and optionally the average (4.5). Products without reviews show nothing, or the text "No reviews yet" if you choose; they never get stars. Style > Rating: star colour and size, alignment, spacing, count colour and typography.
Every product widget (Slider and the Layouts widgets) can show a dot per colour under the image: Content > Colour swatches > Show colour swatches.
The colour attribute is found automatically (named Color, Colour, Couleur…), or enter its slug, e.g. pa_color.
On variable products, choosing a colour shows that variation\'s image on the card (on click, or on hover). The card then links to the product with that colour already selected.
Dot colours: set them in Products > Attributes > (your colour attribute) > Configure terms > Swatch colour. Without it, the colour is read from the name (English and French names, or a hex code like #FFB07C).
Size, gap, shape, alignment and colours: Style > Colour swatches.
The widgets are not in Elementor. Check that they are enabled in Widgets and that Elementor and WooCommerce are active, then reload the editor.
The filter reloads the whole page. The products container was not found: use the Products Archive widget, or set your grid\'s selector in the filter settings.
The wishlist counter shows an old number. A page cache served an old page. The counter refreshes itself after load; also exclude the wishlist page from the cache.
' ),
);
}
public static function page_docs() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
$sections = self::doc_sections();
self::open( self::DOCS, __( 'Documentation', 'nexvio' ), __( 'How to set up and use every widget.', 'nexvio' ) );
?>
 ); ?>){kind=logo}