[WordPress] 外掛分享： 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:
[ssppi_benefits]

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 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).