CommerceKit 2.4.1 introduces enhanced customization capabilities for CommerceKit Wishlist, providing developers with greater flexibility in modifying the Wishlist templates and markup.
Empty Wishlist template filter
- Filter name: cgkit_wishlist_empty_markup
- Purpose: Override the default empty wishlist template
- Flexibility: Modify CSS classes, add custom content, or completely replace the empty state markup
Example implementation:
|
1 2 3 4 5 |
function shoptimizer_cgkit_wishlist_empty_markup( $html ){ $html = str_replace( 'wsl-no-products', 'wsl-no-products override_empty_wishlist', $html ); return $html; } add_filter( 'cgkit_wishlist_empty_markup', 'shoptimizer_cgkit_wishlist_empty_markup', 10, 1 ); |
Complete customization:
|
1 2 3 4 5 6 7 8 9 10 |
// In child theme functions.php // Modify empty wishlist markup function theme_cgkit_wishlist_empty_markup( $html ){ $custom_html = '<div class="custom-empty-wishlist">'; $custom_html .= '<p>Your wishlist is currently empty.</p>'; $custom_html .= '<a href="/shop" class="btn btn-primary">Continue Shopping</a>'; $custom_html .= '</div>'; return $custom_html; } add_filter( 'cgkit_wishlist_empty_markup', 'theme_cgkit_wishlist_empty_markup', 10, 1 ); |
Wishlist Shortcode Markup Filter
- Filter name: cgkit_wishlist_shortcode_markup
- Purpose: Customize the Wishlist shortcode HTML markup
- Flexibility: Modify CSS classes, restructure markup, or add additional elements
Example implementation:
|
1 2 3 4 5 |
function shoptimizer_cgkit_wishlist_shortcode_markup( $html ){ $html = str_replace( 'commercekit-wishlist-list', 'commercekit-wishlist-list override_wishlist_shortcode', $html ); return $html; } add_filter( 'cgkit_wishlist_shortcode_markup', 'shoptimizer_cgkit_wishlist_shortcode_markup', 10, 1 ); |
Complete customization:
|
1 2 3 4 5 6 7 |
// In child theme functions.php // Modify wishlist shortcode markup function theme_cgkit_wishlist_shortcode_markup( $html ){ // Modify or completely replace the shortcode markup return $html; } add_filter( 'cgkit_wishlist_shortcode_markup', 'theme_cgkit_wishlist_shortcode_markup', 10, 1 ); |
Template overriding
- Original Template: /commercegurus-commercekit/includes/templates/frontend-wishlist.php
- Override Locations:
- Child Theme: /your-theme/commercekit/templates/frontend-wishlist.php
Customization scenarios
Scenario 1: Adding Custom CSS classes
Easily add custom classes to modify styling without editing core plugin files.
Scenario 2: Completely replacing markup
Developers can now completely replace the Wishlist markup while maintaining core functionality.
Scenario 3: Template file customization
Full template file override for complete control over the Wishlist grid presentation.
Best practices
- Always use a child theme for customizations
- Test thoroughly after implementing custom markup
- Maintain the original structure and functionality of the Wishlist
- Use WordPress coding standards when modifying templates
Troubleshooting
- Verify filter priority if multiple customizations are applied
- Check for any PHP errors in custom functions
- Ensure compatibility with other plugins and theme customizations
