Prevent WooCommerce from removing my custom nav wrapper? - woocommerce

I've made a custom nav menu wrapper for WooCommerce using wp_nav_menu's items_wrap parameter to add "Check out( [amount] )" around a menu item. But whenever I add a product to the cart from the shop page WooCommerce updates the menu item, removing my wrapper. How can I prevent WooCommerce from doing that (add my wrapper somewhere that makes WooCommerce behave the way I want it to)?

Well, I ended up removing the »cart_totals« class from the link itself, and added a span with the class instead. WooCommerce updates the span instead of the anchor itself – so let's just hope WC don't change their selector at some point in the future, Yak!

Related

How to divide variation selection from add to cart button in woocommerce

I am using Elementor page builder and Woodmart theme. I would like to show variations in one section and add to cart in another. Is there any good way to divide add to cart button and variations. Right now If I add ""add to cart"" element in area varations are above button.
I tried to do it with CSS like on one element hiddig variations and on another hidding add to cart, but I didn't managed to do it properly

CSS/Wordpress: How to hide final element in a breadcrumb

I am using Oxygen Builder in Wordpress, which uses a component to add a breadcrumb from Woocommerce into my product page. When using chrome dev tools, I am not totally sure if it is possible to select the very right-most element in my breadcrumb (i.e. the product name). Here is what the backend looks like:
Once again, I am trying to get rid of the right-most element with custom CSS in my stylesheet:
I was able to solve this by utilizing the Yoast plugin, inserting their short code, and then selecting a class they had specifically on the last element setting display: none.

Issue with WooCommerce Cart & Checkout Layout

Wordpress Version: 4.9.7
WooCommerce Version: 3.4.3
WooCommerce has caused layout issues with the Cart & Checkout page. It's any WooCommerce page with a table.
The table with classes of:
shop_table shop_table_responsive cart woocommerce-cart-form__contents
is causing issues. The WooCommerce CSS for the table sets a width of 100%, however the actual width shows as 4870px. The theme's parent element width is set as 1100px.
Why is the table's width much larger than that set by the theme?
There are no CSS declarations after that overwrites.
There are no issues with the products page or product page.
You can always remove default WooCommerce styles, the risk is that you may use some. Anyway it worth the check:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
If this doesn't help, maybe post a link to the page so we can inspect the layout and CSS?
You might have unnecessary pre tag as a wrapper, causing the table to stretch:
<pre>[woocommerce_cart]</pre>
In order to remove it, you may install "Disable Gutenberg" plugin, then edit the Cart Page in Text tab, leaving only:
[woocommerce_cart]
I had the same issue. The root cause I found was caused by copy/pasting the short code from the woocomerce website directly into a visual editor (WPBakery Page Builder in my case).
The copy picked up the <pre> tag from the source and applied it when pasting, triggering a change of the style to preformatted without me noticing.
Two solutions to fix - depending on your Visual Editor and preference.
Simply changing back to the default Paragraph setting,
Highlight [woocomerce_cart]
Select Paragraph from the drop-down styles list
Update/Publish!
OR, Remove the <pre> tags manually
Change to a 'text' only view of the page code
Remove surrounding <pre> tags leaving [woocomerce_cart]
Update/Publish!
Sorry, can't embed images yet...
Image showing issue:
Image showing manual solution:
This should work for any other short codes pasted in as well, including [woocomerce_checkout] as mentioned in OP.

How to link top and side navigation in wordpress?

I have following navigation structure, which i want to implement in wordpress:
(Home / About / news / Contact) are in top navigation, whereas all sub links are in sidebar.
How can i create this type of navigation in wordpress. i.e. How can i display first level navigation in header and second level navigation in sidebar.
Follow these steps:
First create a main Navigation to your site without child pages and
add it to the theme.
Then create a new menu with child menus only and save it.
Now goto widgets section and from there drag Custom Menu from left
side and add to your sidebar.
Then select your child menu and click save.
Thats all. :)
Check this WordPress Codex section for creating menu tutorial
Cheers!!!
I found these plugins helpful:
Simple Section Navigation
http://wordpress.org/extend/plugins/simple-section-navigation/
It allowed me to create the side nav based on the hierarchy of the pages and their children.
I wanted a bit more control though because I didn't want some of the parents to have their own page ... just a heading for their children. So instead, I'm using this plugin (for the Genesis Framework).
Genesis Simple Sidebars
http://wordpress.org/extend/plugins/genesis-simple-sidebars/
This allows me to create as many sidebars as I want and add custom menus to those. I'm new to this, so maybe I'm taking a long route, but so far it seems to be doing what I want it to.

Adding inline style attributes to Wordpress Menu Items

Using the latest version of WP, is it possible to add inline style attributes to a wordpress menu item from within the wordpress menu panel?
So for example, I have a menu where for whatever reason, I need to position the menu items absolutely. I want my client to be able to go into the WP menu panel and simply add a style of "left: xx%" to any item.
I know this can be done via the stylesheet - but was hoping there was also a way to do this as described above.
Thanks!
Shortcodes Pro is a great plugin for this.

Resources