WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce Menu Cart
[resolved] Image above cart? (7 posts)

  1. HLBOriginals
    Member
    Posted 1 year ago #

    I have just installed the Woocommerce and now have the plugin for menu-cart. I would like an image of a basket to sit above the "items - £xx.xx" there is enough space in the nav for this, but im unsure if this would be a case of having a background image for the plugin/cart, of if i should try and add the image to my nav via the style.css within the template im using (im not using a Woocommerce template).

    Im very new to this coding and web organisation, so can any replies please bare in mind that im a numpty ;) Thanks in advance

    Hay

    http://wordpress.org/extend/plugins/woocommerce-menu-bar-cart/

  2. Ewout
    Member
    Plugin Author

    Posted 1 year ago #

    Hello Hay,
    Assuming you don't want to display the icon at the same time, you could re-use this element in your style.css (do enable the icon though):

    .wpmenucart-contents i {
    	display: block; /* puts it on it's own line */
    	background-image: url('your image url');
    	width: 40px; /* set your own values for the size */
    	height: 40px;
    	background-size: 40px;
    	text-indent: 100%; /* hide the regular font icon */
    	white-space: nowrap;
    	overflow: hidden;
    }
  3. HLBOriginals
    Member
    Posted 1 year ago #

    Hi, thanks for this, im assuming this goes in the template style.css or is it another one? Sorry for the dim question, but i want to make sure.

    Cheers
    H x

  4. Ewout
    Member
    Plugin Author

    Posted 1 year ago #

    Any stylesheet that is loaded with your theme or the plugin (or, for that matter, another plugin). Possibly you will need to add !important tags in your CSS styles to make sure it overrides any other styles.

  5. HLBOriginals
    Member
    Posted 1 year ago #

    Hi, well, something happened because it throw the nav bar out, but after tweaking its fine, sadly my image if failing to show. Now i have used firebug, and i cant get it to generate. So i guess i will have to play around some more. If there are any tips for this, then great, if not.. Thank you for the coding, it is much appreciated.
    x

  6. HLBOriginals
    Member
    Posted 1 year ago #

    Just wanted to say that i got it to work, thanks to your help. Although i did have to put the code within the display as follows

    .wcmenucart-display-right {
    	float: right;
            display: block; /* puts it on it's own line */
    	background-image: url('image');
    	width: 150px; /* set your own values for the size */
    	height: 20px;
    	background-size: 130px;
    	white-space: nowrap;
    	overflow: hidden;
            background-attachment: scroll;

    I also had to upload the image via WP, and not use my FTP to upload, which was bizarre, but its working, so many thanks, im well chuffed :D
    Hay xx

  7. Ewout
    Member
    Plugin Author

    Posted 1 year ago #

    Good to hear that worked for you! I guess the difference in FTP upload & WP upload could be user rights, but functionally there's no problem with using images uploaded via WP. Let us know if you have any other questions or issues!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic