How to install CartPops on the Shoptimizer theme

Replace the Shoptimizer cart drawer and header cart with CartPops by changing a few theme settings and adding a launcher to the header.

CartPops can replace the default Shoptimizer cart. You switch off Shoptimizer’s own cart features, then put the CartPops launcher in the header.

1. Before you start

1. Install and activate CartPops, either Free or Pro. See Installing CartPops.
2. Install and activate the Shoptimizer child theme. You will add code to it. If you don’t have it, read how to get it in Shoptimizer’s child theme guide.

2. Change the Shoptimizer settings

Turn off the Shoptimizer features that CartPops replaces. In wp-admin, go to Appearance > Customize. Under Layout > WooCommerce, switch off:

• Enable sidebar cart drawer
• Enable single product ajax

Then go to Header and Navigation > Cart and switch off:

• Display cart

3. Add the launcher to the header

You add the CartPops launcher shortcode to the Shoptimizer header with a few lines of code in the child theme.

In wp-admin, go to Appearance > Theme File Editor, choose the Shoptimizer Child Theme and open functions.php.

Add this code at the end of the file:

remove_action( 'shoptimizer_header', 'shoptimizer_header_cart', 50 );
add_action( 'shoptimizer_header', 'cartpops_shoptimizer_header_cart', 50 );

remove_action( 'shoptimizer_navigation', 'shoptimizer_header_cart', 60 );
add_action( 'shoptimizer_navigation', 'cartpops_shoptimizer_header_cart', 60 );

function cartpops_shoptimizer_header_cart() {
	echo '<div class="site-header-cart menu">'; // This Shoptimizer wrapper is required for proper alignment of the cart icon.
		echo do_shortcode( '[cartpops_launcher indicator="none"]' );
	echo '</div>';
}

Change the shortcode in the code above to suit your store. For example, remove indicator="none" to show the item count. See Shortcodes for every option.

4. Add CSS

In wp-admin, go to WooCommerce > CartPops > Advanced. On the General tab, add this to the Additional CSS field, then click Save Changes:

.main-header .cartpops-cart__container.cpops-toggle-drawer {
	color: black;
	padding: 0;
}

.shoptimizer-primary-navigation .cartpops-cart__container.cpops-toggle-drawer {
	color: white;
	padding: 0;
}

This CSS suits the default Shoptimizer demo. You may need to change the colors to match your site.

You can also set the launcher colors in CartPops, under WooCommerce > CartPops > Launcher > Inline launcher appearance. See Cart launcher.

5. Check your store

Reload your store and add a product to the cart. Click the cart icon in the header. The CartPops drawer should open.

Shoppers also see the floating launcher. If you only want the header icon, turn off Show floating cart launcher on the Launcher page.