Upgrading to SureCart V3

Upgrading to SureCart V3 introduces powerful new features and enhanced functionality. However, due to significant structural changes, it’s essential to carefully review your site afterward to ensure all elements look and function as expected. 

This documentation provides a complete roadmap for upgrading to SureCart V3, including essential steps to take before upgrading, an overview of new features and improvements, and a post-upgrade checklist to help you verify key pages, resolve any style or layout issues, and identify potential conflicts with themes or plugins.

Things to Do Before Upgrading:

Before proceeding with the upgrade to SureCart V3, there are a few important steps you should take to ensure a smooth transition and avoid potential issues. Following these precautions will help protect your store and minimize downtime in case something goes wrong.

1. Back Up Your Full Site

Why is this important? Backing up your entire site is essential before upgrading to prevent any potential data loss or issues during the process.

How to do it? Use a trusted WordPress backup plugin or your hosting provider’s built-in backup tools to create a complete backup of your site.

Helpful Resource: You may also want to consult the Migrating SureCart to Another WordPress Install guide, which provides detailed instructions on backing up and migrating your site safely.

2. Test In A Staging Environment

Before applying the upgrade to your live site, test it in a staging environment. This helps you identify any issues with custom templates, plugins, or third-party integrations before affecting your customers.

Video Guide

To better assist you for the upgrade, we recorded a video guide where we upgrade a site from version 2 to version 3.

Post-Upgrade Checklist

After upgrading, use the following steps to verify your site and ensure everything is functioning as intended.

1. Check The Shop Page

• Why: Changes to SureCart’s structure and the removal of certain DOM elements may impact the display of the shop page.
• What to Look For: Inspect for any missing margins, spacing inconsistencies, or misaligned elements.
• How to Fix:
  • Edit the shop page and review your layout settings.
  • Remove any unnecessary group blocks that could be causing layout issues. Instead, place the product list at the highest block level to ensure optimal spacing and alignment.
  • If you want to reset the template pattern you can do so by clicking the “replace” button when selecting the “Product List (Migrated)” product list block:
    
    
    
    
  • Double-check that your custom CSS and stylesheets are still applying correctly.
  • Example Issue: Elements like filters or sorting options may need additional styling adjustments due to changes in SureCart’s structure.
    
    

2. Check Collection Archive Pages

• Why: Collection pages may be affected by layout changes in SureCart V3, especially if you’re using custom styling or theme integrations.
• What to Look For: Check for consistent spacing, alignment, and that all collection items display correctly without overlapping or clipping.
• How to Fix:
  • Edit the collection archive pages to adjust any blocks as needed.
  • Consider removing or modifying group blocks that might interfere with the new layout.
  • If custom CSS is in use, verify it is still compatible with the new structure.
    
    

3. Check Product Pages

• Why: Product pages may need adjustments due to changes in SureCart’s DOM structure and functionality enhancements. Wrapper blocks were automatically added to account for the new interactivity API structure.
• What to Look For: Verify that all elements—such as product images, descriptions, prices, and variant selectors—are displayed and working correctly. Additionally, test interactive elements like “Add to Cart” and variant selections to ensure wrapper blocks are added.
• How to Fix:
  • Edit individual product pages and make layout adjustments if any elements appear misaligned or if spacing is off.
  • Check button functionality (e.g., Add to Cart) to ensure all JavaScript elements are operational.
  • If you want to reset the template, you can edit the template, click the “Template” or “Template Part” tab, and reset it:
    
    
    
    
  • Example Issue: If prices or product variants aren’t displaying correctly, reconfigure the product settings or double-check any custom code added for styling.
    
    

4. Check Slide Out Cart

• Why: The cart experience is critical, and V3 changes could potentially impact the display or interaction of the cart.
• What to Look For: Add products to the cart and open the slide-out cart to ensure all items are visible, prices are correct, and buttons (e.g., Checkout) are working as expected.
• How to Fix:
  • If the slide-out cart has styling issues, adjust CSS or review your theme’s compatibility.
  • If you want to reset the template, you can edit the template, click the “Template Part” tab, and reset it:
    
    
    
    
  • Confirm that all items in the cart display correctly and that any custom cart modifications are still functional.
    
    

5. Check Add To Cart and Buy Buttons

• Why: These buttons were reworked to use your theme’s styles for the default WordPress button block.
• What to Look For: Ensure your add to cart and buy buttons are styled to your liking. They may have changed in terms of color, size or width depending on your theme’s styles. Some theme do not correctly style these buttons, or provide support for this native WordPress functionality.
• How to Fix:
  • If the button’s colors, spacing or size are not to your liking, and you are using the block, adjust the color settings of the block.
  • 
  • If you are using a shortcode, you may need to add your own styles or adjust your theme’s styles to get these buttons styled to your liking.
  • If you are only using the buy button, consider using your page builder’s button with a custom buy link.
  • Confirm that your buttons display correctly and that any purchase and cart actions are functional.

New Features and Functionality in V3

SureCart V3 introduces several enhancements to improve performance, customization, and design flexibility. Here’s an overview of the key updates:

WordPress Interactivity API Integration

The Cart, Shop Page, and Product Page have been moved to the WordPress Interactivity API, providing a more dynamic user experience such as more block styling, easier CSS customizations, and more.

SureCart Products as Custom Post Types

SureCart products are now handled as Custom Post Types, offering benefits such as improved speed, greater customization options, compatibility with SEO plugins, Custom Query from code or using Wp Grid Builder and more.

• Advanced Custom Fields and Metabox integration.
• Post meta box integration
• Improved usage in page builders and query loops

Product Images in WordPress Gallery

All product images are now managed through the WordPress gallery, making it easier to organize and manage media.

Flexible Product List Design

The product list (shop page) is now composed of smaller blocks, giving you more flexibility in design and customization.

Product List Patterns

You can choose from pre-made patterns (templates) for your product list layout.

New Product Filters

Two additional filters have been introduced: Show products by taxonomy (SureCart Collection) and show products by keywords.

New Default Sorting

You can now set the default sorting order for your shop. This allows you to display your products in the order that best suits your store’s needs, giving you control over how customers see your listings first.

New Sale Badge

A sale badge has been added to products, providing a visual cue for discounted items.

Automatic Layout Grid

The new auto layout mode adjusts your product grid to fit different screen sizes, offering a responsive design without manual adjustments.

Native Bricks Builder Integration

• Templates for Bricks Builder: SureCart – Single Product and SureCart – Collection Archive.
• Compatibility with ACSS (Automatic CSS)
• Product loop
• About 20 dynamic data points have been added for Bricks Builder integration.
• 12 native Bricks elements were introduced, including: Product Form, Product Card, Add to Cart, Collection Tags, Product Media, Price Selector, Price Data, Product Data, Quantity, Sale Badge, Custom Amount, Product Variant Pills.
  
  IMPORTANT: For SureCart elements (such as Add To Cart, Collection Tags, Product Media, etc.) to function properly, they must be placed within the Product Form or Product Card block wrappers.

Additional Considerations

Manual Checks: After upgrading, manually review each key page on the frontend to confirm everything appears and works as expected. This includes checking different screen sizes if your site is responsive.

Caching Issues: Caching can sometimes cause problems by serving outdated content or styles. After upgrading, be sure to clear your site’s cache to prevent any display or functionality issues. For more information on managing caching effectively, refer to our SureCart Caching Documentation.

FAQ