Customizing the Commercekit Wishlist Template

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:

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:

// 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:

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:

// 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