Sidocode Selling Points & Payment Icons

Sidocode Selling Points & Payment Icons for WooCommerce lets you add a benefit bar to your product and category pages — showing icons with titles and descriptions to highlight key selling points like free shipping, secure payment, easy returns, and more.

Key Features

Five Display Layouts

• Icon List — A clean horizontal or wrapping list of benefit items, each with an icon, title, and description.
• Carousel — A smooth sliding carousel with optional navigation arrows, dot indicators, and configurable auto-play interval.
• Flash Rotate — Items animate in one at a time, rotating at a configurable interval — ideal for compact bars.
• Grid — A responsive grid of benefit items, great for showcasing multiple features at a glance.
• Inline Compact — A tightly spaced single-line bar with separator dividers, perfect for narrow spaces.

Flexible Display Positions (Product Pages)

Choose where the benefit bar appears on single product pages:

• Before Add to Cart Form
• After Add to Cart Form
• After Add to Cart Button
• After Product Price
• Before Single Product
• Shortcode Only — use [ssppi_benefits] for full manual control

Mobile Layout Override

Set a different layout for screens 768 px wide and below — for example, use Icon List on desktop but switch to Carousel on mobile.

Per-Product Overrides

Each product has a dedicated Benefits tab inside the WooCommerce Product Data metabox. Check the override checkbox to replace the global benefit items with a custom set for that product only.

Per-Category Overrides

Each WooCommerce product category (Products → Categories) has a Product Benefits section. Check the override checkbox to define custom benefit items for that category. Products in that category will display the category’s items when no product-level override is set.

Benefit Bar on Category Archive Pages

Optionally display the benefit bar on WooCommerce category/shop archive pages. Configure:

• Enable/Disable independently from product page display
• Position — After Category Description/Title, or Before the Product Grid
• Category Desktop Layout — Override the global desktop layout for category pages
• Category Mobile Layout — Override mobile layout separately for category pages
• Category Content Alignment — Override content alignment for category pages

Three-Tier Item Hierarchy

Items are resolved in this order: 1. Product-level override (if enabled for that product) 2. Category-level override (checks all categories assigned to the product) 3. Global items (fallback for all products and category pages)

Three Icon Types per Item

• Icon Library — 12 built-in SVG icons: Shipping, Guarantee, Returns, Secure Payment, Top Rated, Fast Delivery, Free Gift, Satisfaction, Best Price, 24/7 Support, Award/Quality, Package
• Image — Upload any image via the WordPress Media Library
• None (Text Only) — Show only the title and description without any icon

Appearance Controls

• Icon Size (px)
• Background Color
• Text Color
• Title Color
• Column Gap (px)
• Title Font Weight (Normal 400 through Extra Bold 800)
• Content Alignment (Left, Center, Right)
• Description Display (Single Line with overflow clip, or Multi Line with natural wrap)

Carousel & Flash Rotate Settings

• Show/hide navigation arrows on the carousel
• Configurable auto-play interval (set 0 to disable)
• Active dot colour
• Flash Rotate rotation interval

Shortcode

Use the shortcode anywhere in your content for full manual placement:

Optional attributes:

• layout — Override the layout for this instance (e.g. layout="carousel")
• product_id — Display benefits for a specific product (e.g. product_id="42")

Example: [ssppi_benefits layout="grid" product_id="123"]

Import / Export

Export all global benefit items and plugin settings to a JSON file from the plugin settings page. Import a previously exported file to restore your configuration — useful for migrating between sites or keeping backups. Per-product and per-category overrides are not included in the export.

Theme Templates

All five layout templates can be overridden from your theme. Copy any template file from wp-content/plugins/woocommerce-product-benefits/templates/ to wp-content/themes/your-theme/woocommerce-product-benefits/ and customise freely.

Developer Hooks

• ssppi_render_items — Filter benefit items before rendering on product pages
• ssppi_render_settings — Filter display settings before rendering on product pages
• ssppi_render_category_items — Filter benefit items before rendering on category pages
• ssppi_render_category_settings — Filter display settings before rendering on category pages
• ssppi_pi_render_items — Filter payment icon items before rendering
• ssppi_pi_render_settings — Filter payment icon display settings before rendering

Payment Icons Bar

Display a row of accepted payment method icons anywhere on your store. Goes alongside — but is completely independent of — the benefit bar.

• Built-in icon library — a broad set of payment SVGs (Visa, Mastercard, PayPal, Apple Pay, Google Pay, Stripe, and more), always color-accurate.
• Two icon types — library icons or WordPress Media Library image.
• Three placement options — product page (before or after the Add to Cart form), cart page (before or after the Checkout button), and the site-wide footer.
• Flexible header — optional title with configurable text, font size, font weight (300–700), color, and left/center/right alignment. Optional lock icon beside the title.
• Banner layout — Column mode (header stacks above icons) or Row mode (header and icons sit side by side, with optional mobile stack).
• Style modes — Default (full color) or Monochrome (grayscale filter).
• Sizing and spacing — separate icon sizes and gap values for desktop and mobile.
• Placement CSS classes — each placement adds a modifier class (ssppi-pi-placement-footer, ssppi-pi-placement-product, ssppi-pi-placement-cart) so you can style each location independently from your theme stylesheet.
• No render-blocking CSS — styles are inlined via wp_add_inline_style rather than a <link> tag; assets load only on pages that actually display the bar.
• Live admin preview — changes to all settings are reflected instantly in a sticky preview panel beside the icon picker.
• Theme template override — copy templates/payment-icons.php to your theme to fully customise the markup.

Performance

CSS and JavaScript are registered early and enqueued only on pages that actually display a benefit bar or payment icons bar. No assets are loaded on unrelated pages. Payment icon styles are fully inlined to avoid render-blocking requests on above-fold content.

WooCommerce HPOS Compatible

Fully compatible with WooCommerce High Performance Order Storage (Custom Order Tables).