[Jimmy PParticipant]

1. Is there anyway to use a shortcode to display this:
http://prntscr.com/ajgctb

2. If not, what needs to be added to this shortcode to make the cart reference my cart page when clicked?:
[icon type=”shopping-cart”]

I am using the ShiftNav plugin for mobile displays and wanted to add a cart to the top right corner. After contacting the shiftnav support team, they instructed my how to add a shortcode. I was successful when I added “[icon type=”shopping-cart”]”, but the icon was too small. After trying to increase the px size, I was getting an error. Also, I need to it refrence my cart page of course.

Thanks for your help!

[JadeModerator]

Hi Jimmy,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Jimmy PParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I can see that it’s custom coding. To link your cart to that icon, then simply add your cart URL to href’s attribute.

Example,

<a class="wpmenucart-contents empty-wpmenucart-visible" href="https://www.empowersperformance.com/cart/" title="Start shopping">

The for the icon, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

  .wpmenucartli a.wpmenucart-contents {
    color: #000000;
    background-color: #ffffff;
    font-family: "Lato",sans-serif;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.071em;
    font-size: 14px;
    display: block;
    margin: 0;
    border: 0.25em solid;
    padding: 0;
    overflow: auto;
    text-align: center;
    background-clip: content-box;
    border-radius: 0.415em;
    margin: 10px auto;
}

.wpmenucartli a.wpmenucart-contents .wpmenucart-icon-shopping-cart-0 {
    padding-right: calc(0.625em - 0.071px);
    display: block;
    float: left;
    padding: 0.35em 0.625em;
}

.wpmenucartli a.wpmenucart-contents .cartcontents,
.wpmenucartli a.wpmenucart-contents .amount {
    color: #ffffff;
    background-color: #000000;
    padding: 0.35em 0.625em;
}

.wpmenucartli a.wpmenucart-contents:hover {
    color: #dd3333;
    background-color: #ffffff;
}

.wpmenucartli a.wpmenucart-contents:hover .cartcontents,
.wpmenucartli a.wpmenucart-contents:hover .amount {
	color: #ffffff;
    background-color: #dd3333;
}

Hope this helps.

[Jimmy PParticipant]

Thank you so much. The button works great, however now it looks like this:

http://screenshot.net/241k0up

How can we get the duplicate cart display from the middle gone?
Also can we pad it a little to bring it down some?

Thanks!

[Rue NelModerator]

Hello There,

I am no longer seeing the cart in your site. Did you happen to disable it? I also noticed that you are using a caching plugins. I’d recommend that you clear your caching plugin, and disable it during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site. And also you are using CloudFlare. Please login to your account and set it to development mode so that we can see the changes right away. You can turn off the development mode when you are about to go live.

To move down the cart, please update the code we gave you by using this:

.wpmenucartli {
    margin-bottom: 20px;
  }

  .wpmenucartli a.wpmenucart-contents {
    color: #000000;
    background-color: #ffffff;
    font-family: "Lato",sans-serif;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.071em;
    font-size: 14px;
    display: block;
    margin: 0;
    border: 0.25em solid;
    padding: 0;
    overflow: auto;
    text-align: center;
    background-clip: content-box;
    border-radius: 0.415em;
    margin: 10px auto;
}

.wpmenucartli a.wpmenucart-contents .wpmenucart-icon-shopping-cart-0 {
    padding-right: calc(0.625em - 0.071px);
    display: block;
    float: left;
    padding: 0.35em 0.625em;
}

.wpmenucartli a.wpmenucart-contents .cartcontents,
.wpmenucartli a.wpmenucart-contents .amount {
    color: #ffffff;
    background-color: #000000;
    padding: 0.35em 0.625em;
}

.wpmenucartli a.wpmenucart-contents:hover {
    color: #dd3333;
    background-color: #ffffff;
}

.wpmenucartli a.wpmenucart-contents:hover .cartcontents,
.wpmenucartli a.wpmenucart-contents:hover .amount {
	color: #ffffff;
    background-color: #dd3333;
}

Hope this helps. Kindly let us know.

[Jimmy PParticipant]

Thank you for the support.
I put the account on development mode and cleared all cache as suggested.

I still get the following issues though:

1. After entering the code in ShiftNav as seen here:
http://prntscr.com/alk2eu

2. The output looks like this:

http://prntscr.com/alk1mf

http://prntscr.com/alk1yy

Is there a different shortcode I can use for the “right edge” in shiftnav besides this:

Thanks!

[LelyModerator]

Hi Jimmy,

See attached screenshot. That is what I saw when I checked your site. Did you remove the cart link? Please add it again so we can check and then give you a more tailored solution to make it on the right side on mobile view.

Always,
X

[Jimmy PParticipant]

Yes I removed it after taking the screen shots.

I have added the code again in ShiftNav.

Is there a different shortcode that can be added to that section?

Thanks

[RadModerator]

Hi Jimmy,

I’m not sure if there are any, and not sure if it’s possible with your ShiftNave. I think it’s best to contact the plugin author for proper guidance.

Check this sample too https://docs.woothemes.com/document/show-cart-contents-total/, maybe that needs proper integration with ShiftNav.

Thanks for understanding.

[Author]

Posts