A mix of the good and the bad
As with many, I was excited when the email finally came out stating that we were going to be to modify WooCommerce pages in Divi without the need of a third-party plugin. For the last couple of years, I’ve been using the plugin Woo Layout Injector by Sean Barton to make custom designs on all WooCommerce pages and have been happy with the results. That being said though, I never understood, why at this point in Divi’s long history, you still needed a third-party plug to accomplish this. As a designer, I rarely like anything that has been predesigned for me, and always work on the assumption, with a few of my tweaks everything will be much better.
I had a project that had been on hold waiting for this update, as the current shopping cart was being converted to WooCommerce. With the announcement from Elegant Themes on September 19th, that “The WooCommerce Builder for Divi” was released, I was off to the races.
As I began building the new shopping cart, immediately, I was pleased. No longer did I have to build a layout, then assign it to a product, and then view that product, to see if I liked where I was going. Woohoo!
In short order, I had the Single Product Page designed. But as with Woo Layout Injector, I still had one major disappointment. You can’t change the padding around the type in the dropdown menu in the module. One of the things I absolutely hate the most in WooCommerce is the dropdown menu with the variations. Too skinny and the type looks crowded. With the help of Colin Falcon of Simply Design Me, I added the following CSS:
.woocommerce div.product form.cart .variations
.woocommerce table.variations select#style {padding: 10px !important;}
Below are pictures of how Safari, Chrome, and Firefox responded to the CSS:
Safari
Chrome
Firefox
Why, oh why is Firefox the only browser able respond to the CSS. I’m hoping that in the next update, there will be an option to change the padding around the type, without having to add custom CSS.
Other than the problem above, the new modules work well and do save time in custom designing the Single Product Page.
Now for the bad and ugly
One way I have solved my dislike for the variations dropdown menu in the past was to use the plugin Variation Swatches for WooCommerce by ThemeHigh. With everything set up in the plugin, I open one of the product pages to change the Attributes to those specified in the plugin only to find those options were not available. I’m quite sure I’m not the only Divi designer out there that would rather have swatches that are either colored dots or images of a product than the dropdown bar. It seems to me that along with being able to change the padding around the type of the dropdown menu, this is something that should be built into the module, removing the need for another third-party plugin.
With the Single Product Page designed, I installed the Woo Layout Injector plugin to custom design both the Cart Page and the Checkout Page. Again, just like the plugin above, I find a conflict. As the saying goes, “A picture is worth a thousand words.” The pictures below show the conflict better than I can state.
Without Woo Layout Injector Activated
With Woo Layout Injector Activated
The work that has been done so far by the team at Elegant Themes is stepping in the right direction. But after waiting for two years and all of the hype, it is a letdown that we still are not able to custom design the Cart Page and Checkout Page.
In conclusion, when it comes to building the next shopping cart I build will I use the Divi Woo modules or Woo Layout Injector? As long as the customer does not want custom designs for the Cart Page and Checkout Page, I’ll use the Divi Woo modules. Otherwise, I’ll go back to Woo Layout Injector.