Change WP Menu Cart style

  • Resolved glorisol

    (@glorisol)


    4 years, 9 months ago

    HI,

    I am testing if the WP Menu Cart plugin would be something to buy (as I have two menus on the site, one per language I would need to pro version).

    Although the plugin seems to do what I want, I do want to change something.
    I would like to have the “# items” and the cart-value positioned under each other next to the shopping cart icon. Obviously, the font height need to be 50% (ish) for it in order to fit.
    Is there any way to accomplish this?

    Something like: https://drive.google.com/file/d/1o3WghYOstFfMnV4BwJYxI3HTUSN16bJu/view?usp=sharing
    (created in paint, not a real screenprint)

    • This topic was modified 4 years, 9 months ago by glorisol.
    • This topic was modified 4 years, 9 months ago by glorisol.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor alexmigf

    (@alexmigf)

    Hello @glorisol

    Please try this:

    add_action( 'wp_head', 'wpo_menu_cart_custom_styles' );
function wpo_menu_cart_custom_styles () {
    ?>
		<style>
			li.wpmenucartli a.wpmenucart-contents {
				font-size: 1.2rem; /* change accordingly */
			}
            li.wpmenucartli a.wpmenucart-contents span.amount {
				display: block !important;
			}
			li.wpmenucartli a.wpmenucart-contents span.amount::before {
				content: '';
				display: inline-block;
				width: 15px;
			}
        </style>
    <?php
}

    If you never worked with actions/filters, please read this documentation page: How to use filters

    • This reply was modified 4 years, 9 months ago by alexmigf.
    Thread Starter glorisol

    (@glorisol)

    Hi @alexmigf

    Brilliant!
    I modified it a bit (and with your example I knew where to look for), see below.

    But can’t I put this (the part between ?> and <?php) in Custom CSS instead of functions.php ?

    add_action( 'wp_head', 'wpo_menu_cart_custom_styles' );
function wpo_menu_cart_custom_styles () {
    ?>
                <style>
                        li.wpmenucartli a.wpmenucart-contents {
                                font-size: 1.2rem; /* change accordingly */
                        }
                        li.wpmenucartli a.wpmenucart-contents span.cartcontents {
                                font-size: 8pt;
                                vertical-align:top; 
                        }
                        li.wpmenucartli a.wpmenucart-contents span.amount {
                                display: block !important;
                                font-size: 8pt;
                                vertical-align:bottom; 
                        }
                        li.wpmenucartli a.wpmenucart-contents span.amount::before {
                                content: '';
                                display: inline-block;
                                width: 15px;
                        }
        </style>
    <?php
    Plugin Contributor alexmigf

    (@alexmigf)

    Hello @glorisol

    Yes, you can!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change WP Menu Cart style’ is closed to new replies.