Description
The Shop UX Toolkit plugin enhances WooCommerce shop and product pages by addressing design and accessibility issues. Designed for the Storefront theme, it uses CSS to modify only WooCommerce code, leaving your theme untouched. It’s lightweight, with toggleable features, and may work with other themes showing similar issues (e.g., links without underlines), though testing is recommended.
Improves Link Appearance
- What it does: Adds underlines to WooCommerce page links (missing in Storefront) and removes them on hover.
- Why it’s helpful: Enhances readability, fixes Google PageSpeed Insights errors for links relying only on color, improving accessibility and potentially SEO.
Adds Hover Effects to Category and Product Boxes
- What it does: Applies a subtle lift and shadow effect only when hovering over clickable elements in category/product boxes, with fixed lower-left and lower-right corner coverage.
- Why it’s helpful: Signals clickability, creating a polished look that encourages clicks, potentially increasing click-through rates (CTR) and sales.
Centers Titles in the Large Product Image Modal
- What it does: Centers image titles in the enlarged image modal triggered by the magnifying glass on single-product images.
- Why it’s helpful: Improves readability and presentation in the gallery lightbox.
Customizes Focus Outlines
- What it does: Toggles focus outlines (visible borders around clickable elements) to appear only for keyboard navigation, not mouse/touch.
- Why it’s helpful: Ensures accessibility for keyboard users (including those with disabilities) while maintaining a clean look for mouse/touch users.
Why Choose This Plugin?
- Enhanced User Experience: Clear links and hover effects improve navigation and engagement.
- Accessibility Compliance: Meets standards for users with visual impairments or assistive technologies.
- SEO Benefits: Fixes PageSpeed Insights errors, potentially boosting search rankings.
- Polished Design: Delivers a consistent, professional look to build customer trust.
- Flexible: Toggle features on/off for minimal site speed impact.
Live demo: https://www.smokingblends.com — hover product boxes, check description links, and Tab to see the focus option.
Usage
Use the Settings page to toggle link underlines, hover lift, and keyboard focus.
Contributing
Free plugin, Storefront-first. Suggest changes via WordPress.org Support forum with WP, Woo, theme versions, steps, and minimal code.
Privacy
This plugin does not collect, store, or transmit personal data, and makes no external requests.
Screenshots
Description links underlined by default, removed on hover. [screenshot-1.png] 
Product/category boxes with soft shadow lift on hover. [screenshot-2.png] 
Settings page with on/off toggles. [screenshot-3.png] 
Optional keyboard-only focus outline while tabbing. [screenshot-4.png]
Installation
- Upload to
/wp-content/plugins/or install via Plugins Add New. - Activate the plugin.
- Go to Plugins Installed Plugins Shop UX Toolkit Settings to enable/disable features.
- Clear page cache or CDN after changing settings.
FAQ
-
What does the plugin do?
-
It enhances WooCommerce shop/product pages with better links, hover effects, centered image titles, and keyboard-only focus outlines, improving UX, accessibility, and engagement.
-
Will it work with my theme?
-
Designed for Storefront, it modifies only WooCommerce code via CSS, so it may work with other themes showing similar issues (e.g., no link underlines). Test to confirm.
-
Can I customize features?
-
Yes, enable/disable link underlines, hover effects, or focus outlines in the settings.
-
Is it lightweight?
-
Yes, CSS-based for minimal impact on site speed, ideal for using just one feature.
-
How does it improve accessibility and SEO?
-
Underlined links and keyboard-only focus outlines meet accessibility standards for visual impairments. Fixing PageSpeed Insights errors (e.g., color-only links) may improve SEO.
-
Do I need coding skills?
-
No, adjust settings via the WordPress dashboard. A “Settings” link appears on the Plugins page.
-
How do I verify it’s working?
-
Check shop/product pages for underlined links, hover effects, and focus outlines. Test accessibility with tools like Google PageSpeed Insights.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Shop UX Toolkit” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Shop UX Toolkit” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
0.2.2
- Refined hover-lift to clickable elements in category/product boxes.
- Fixed lower-left and lower-right corner hover effect coverage.
- Centered image titles in single-product large image modal.
0.2.1
- Added link behavior for single-product description tabs.
- Clarified Storefront-first testing and support.
0.2.0
- CSS-only simplification; focused UX tweaks on archive pages.