X Theme 4.0.4 – Notes

June 30, 2015Another day, another release! As always, we’re incredibly excited about this new update to X as well as the paired update with Cornerstone that brings some exciting new features to the fold. This time around we focused primarily on bringing new functionality to our WooCommerce integration. Specifically, we’ve added a navbar cart, which can be easily configured in many different forms and we have also improved the WooCommerce AJAX index behavior to provide greater feedback to our users.

The navbar cart is enabled via the WooCommerce section of the Customizer and features a variety of configuration options. Below is one example of the many end results you can achieve with the navbar cart as well as a list that quickly summarizes these newly available options:

• Cart Information – Choose whether to show one or two pieces of data. Additionally, you can specify their order and appearance here.
• Cart Style – Square or rounded.
• Cart Layout – Inline or stacked.
• Cart Alignment – Specify the vertical alignment of your cart in the navbar.
• Cart Content – Specify what to output for each informational section (e.g. cart icon, total, item count, et cetera).
• Cart Colors – Choose the inner and outer colors for your cart for both inactive and active states.

The navbar cart will update in real time if you have the Enable AJAX add to cart buttons on archives setting turned on. Also, we have also included some new features for this setting as well to help make the shopping experience more fluid within X. If this WooCommerce setting is enabled, you will be able to utilize four additional options within the same section of the Customizer. These options can be found under the AJAX Add to Cart subsection, and they allow you to customize the colors of the various states for the AJAX confirmation animation that we have added to X:

Remember, this animation will only take place on your shop archive pages and you must have the setting previously mentioned enabled for it to work. Due to some of the considerations needed for these new elements, we have also added two new options to the Customizer: Navbar Top Link Spacing (px) and Navbar Letter Spacing (px). The link spacing option can be found under the Header section of the Customizer and allows you to now specify the spacing between top level links in your fixed or static top navigation. The navbar letter spacing option can be found in the Typography section of the Customizer and allows you to set the letter spacing of top level navigation items for greater control. These controls were needed to position various elements correctly in a dynamic manner and should be set for you automatically when upgrading. The previous setting for link spacing in Ethos has been removed in favor of this new global option.

We also made a minor tweak to how navbar links are positioned for Icon so that there is greater consistency across all Stacks. Because of this, after updating you will need to make sure to adjust your navbar link positioning to your desired position. Due to the nature of this setting, there was no way to automatically take care of this, and as it is a minor adjustment it shouldn’t take long to get back in place.