Support » Plugin: WooCommerce » It was a good update but needed some preparation

  • 3.0 was tempting and a major update. It was mentioned in updater screen to check with theme vendors and developers if their product is ready for this update or not. I got some issues after updating but those got fixed after doing some changes and checks. Hope these may help:

    1. Make sure to run WooCommerce updater by clicking on the dashboard link in WordPress admin. An updater notice will appear. Run the updater by clicking on the link/button.

    2. If using any caching plugins, purge/clear all caches and modules.

    3. If using WooCommerce dependent plugins, make sure they are updated as well. In my case, updating some of them like YITH Wishlist, YITH Quick View, etc fixed the issue.

    4. Check for deprecated hooks. For example, an ajax cart update hook like ‘add_to_cart_fragments’ needs to be changed to ‘woocommerce_add_to_cart_fragments’.

    5. If using custom CSS overrides for shop and product styles, make sure to include these gallery styles into your theme files:

    /* 3.0 */
    .woocommerce div.product div.images {
    	margin-bottom:2em
    }
    .woocommerce div.product div.images img {
    	display:block;
    	width:100%;
    	height:auto;
    	box-shadow:none
    }
    .woocommerce div.product div.images div.thumbnails {
    	padding-top:1em
    }
    .woocommerce div.product div.images.woocommerce-product-gallery {
    	position:relative
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    	transition:all cubic-bezier(.795, -.035, 0, 1) .5s
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    	width:25%;
    	display:inline-block
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    	position:absolute;
    	top: 8px;
    	right: 8px;
    	font-size: 24px;
    	z-index:9;
    	width: 36px;
    	height: 36px;
    	background:#fff;
    	text-indent:-9999px;
    	border-radius:100%;
    	box-sizing:content-box
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger:before {
    	content:"";
    	display:block;
    	width:10px;
    	height:10px;
    	border:2px solid #000;
    	border-radius:100%;
    	position:absolute;
    	top:9px;
    	left:9px;
    	box-sizing:content-box
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger:after {
    	content:"";
    	display:block;
    	width:2px;
    	height:8px;
    	background:#000;
    	border-radius:6px;
    	position:absolute;
    	top:19px;
    	left:22px;
    	-webkit-transform:rotate(-45deg);
    	-moz-transform:rotate(-45deg);
    	-ms-transform:rotate(-45deg);
    	-o-transform:rotate(-45deg);
    	transform:rotate(-45deg);
    	box-sizing:content-box
    }
    .woocommerce div.product div.images .flex-control-thumbs {
    	float: none;
    	overflow:hidden;
    	zoom:1;
    	margin:0;
    	padding:0
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
    	width:25%;
    	float:left;
    	margin:0;
    	list-style:none
    }
    .woocommerce div.product div.images .flex-control-thumbs li img {
    	cursor:pointer;
    	opacity:.5;
    	margin:0
    }
    .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover {
    	opacity:1
    }

    6. Add product gallery zoom, lightbox and slider support in functions.php’s after_setup_theme function hook:

    function mytheme_setup() {
    	add_theme_support( 'woocommerce' );
    	add_theme_support( 'wc-product-gallery-zoom' );
    	add_theme_support( 'wc-product-gallery-lightbox' );
    	add_theme_support( 'wc-product-gallery-slider' );
    }
    add_action( 'after_setup_theme', 'mytheme_setup' );

    7. If you see blank product archive screen, disable caching plugins and delete all transients, expired transients and orphaned variations inside WooCommerce > System Status > Tools.

    8. Check for WooCommerce template files overrides inside your theme. Although version number may be updated to latest one and the notice can be avoided, but re-check with original template files if the updated code has been merged with custom ones.

    9. Enable debug mode for a while to see what error messages appear. You can post that in support forum so that developers can check.

    10. The shop/archive product title selector was changed. So include this selector in theme files if using custom CSS:

    .woocommerce ul.products li.product .woocommerce-loop-product__title { // your styles }

    These are only general checks and solutions which worked for me. Hope these may help in some cases.

    Regarding the update, I really like the new improved features. The product gallery and zoom feature is awesome. Great job.

    • This topic was modified 3 years, 6 months ago by desertSailors.
  • The topic ‘It was a good update but needed some preparation’ is closed to new replies.