I have an issue when my store (woocommerce) displays in mobile version

The shop page https://www.freektopia.com/shop/ is working fine when the shop is in "grid mode" on mobile but the cart and wishlist button display way on top and bottom of the page in "list mode".

  • Huberson
    • Recruit

    Hi,
    Please try the code below and let us know if it fixes the issue in list mode. The first code should be pasted inside your footer JavaScript using Theme Options > Custom Code.

    /* wpmu Tech - Strat */
    /* fix cart and wish list button in list mode for mobile */
    var toggle_view_btn = document.querySelector('.woocommerce-toggle-viewmode');
    var view_mode_active = document.querySelector('.woocommerce-toggle-viewmode span[class="active"]');
    var cart_btns = document.querySelectorAll('.button-wrapper .add_to_cart_button');
    var wish_list_btns = document.querySelectorAll('.button-wrapper .add_wishlist'); 
    
    toggle_view_btn.onclick = function(e)
    {
    	if ( view_mode_active.dataset.view_mode = 'list' && window.innerWidth <= 500 )
    	{
    		cart_btns.forEach(
    			function(cartbtn) {
    				cartbtn.setAttribute('id', 'cart_id_list');
    		});
    
    		wish_list_btns.forEach(
    			function(wlstbtn) {
    				wlstbtn.setAttribute('id', 'wish_id_list');
    		});
    
    	}
    	else
    	{
    		cart_btns.forEach(
    			function(cartbtn) {
    				cartbtn.removeAttribute('id');
    		});
    
    		wish_list_btns.forEach(
    			function(wlstbtn) {
    				wlstbtn.removeAttribute('id');
    		});
    	}
    
    }
    /* wpmu Tech - End*/

    And paste this one below the existing custom CSS:

    /* wpmu Tech - Strat */
    /* fix cart and wish list button in list mode for mobile */
    #cart_id_list, #wish_id_list {
    	position: initial!important;
    	margin-bottom: 4px!important;
    }
    
    #cart_id_list .icon, #wish_id_list .icon {
    	display: inline-block!important;
    }
    /* wpmu Tech - End */

    Best,
    Huberson

  • Kasia Swiderska
    • Support nomad

    Hello Erika,

    Please try this CSS code:

    @media screen and (max-width: 480px) {
    .products-list .product-action-hover {height: 136px;}
    
    ul.products.products-list  li.product-item .product-action-hover .button-wrapper:nth-child(2n+1),
    ul.products.products-list li.product-item .product-action-hover .button-wrapper:nth-child(2n) {
         transform: none;
         -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
    }
    
    .products-list a.button.add_to_cart_button.product_type_simple.ajax_add_to_cart,
    .products-list a.add_wishlist.button {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    }
    
    }

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.