Hello,
There is a description and price next to my Add to Cart button that I would like to get rid of. Please see Content > Email Marketing > Section 3. Can I remove the ‘$79 every month and a $389 sign up fee’ to the left of the Add to Cart button?
Hello,
the website is under construction. I’ve provided the log in info in a secure note.
Hi there,
Thank you for the information. Please kindly add the CSS code below to Pro > Launch > Theme Options > CSS:
.add_to_cart_inline .amount,
.add_to_cart_inline .subscription-Details {
display: none;
}
Thank you.
1 Like
Perfect. That did it.
Allow me to pose another request. I’d like the exclamation point in the circle that causes the drop down to appear out to the right of each service description. Is that something that you can help me with?
Hey There,
Thanks for updating in!
To position the exclamation point in the circle to the right of each service description, please use this code:
li.x-li-icon .dropdown {
float: right;
margin-top: -25px;
margin-right: 30px;
}
Please let us know if this works out for you.
It worked great.!
Two things to fine tune. 1) the dropdown box is very thin. Can we make it wider? 2) The dropdown box appears below the ‘!’ icon can we make it appear above and a bit to the right?
Hello @steve,
Thanks for updating thread. 
- Please add following CSS under Pro > Launch > Theme Options > CSS to change the width of service description tooltip
.dropdown-content {width: 500px; padding: 20px;}
2. Please replace above CSS shared by my colleague with the following to change position of exclamation mark:
li.x-li-icon .dropdown {float: right; margin-top: -25px; margin-right: 5px;}
Let us know how it goes.
Thanks.
Okay, we are on the right path. Please preview the page. In the editor everything looks and works great. However when you preview it you will notice that the two package columns are stacking in a very funny way on a large screen instead of being side by side. In the preview you will also notice that the dropdowns are not working. Also the price and the ‘per month’ content next two it overlap one another. What can I do?
- the packages are displaying on top of one another
- dropdowns are not working
- the price and content to the right overlap in some cases.
Hi There,
1.) This issue might happen because of incorrect html tags. You might have tags that is not close properly. I have checked your content thoroughly and I found this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Create two columns left for price, right for terms that floats next to each other */
.column1 {
float: left;
width: 42%;
padding: 0px;
height: 120px;
}
.column2 {
float: left;
width: 58%;
padding: 3.5em 0em 0em 0em;
height: 120px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
}
/* Content */
</style>
</head>
<body>
<div class="row">
<div class="column1" style="font-size:5.4em;">
<p> $99 </p>
</div>
<div class="row">
<div class="column2" style="font-size:1em;">
<p>Per Month <br /> No annual commitment</p>
</div>
</div>
</body>
</html>
No need to add the entire HTML content. The page is already a complete html setup. What you need to add only on that specific text element, is this part:
<div class="row">
<div class="column1" style="font-size:5.4em;">
<p> $99 </p>
</div>
</div> <!-- this closing div is missing causing the issue -->
<div class="row">
<div class="column2" style="font-size:1em;">
<p>Per Month <br /> No annual commitment</p>
</div>
</div>
Add the following custom CSS on page content CSS not on the text element.
/* Create two columns left for price, right for terms that floats next to each other */
.column1 {
float: left;
width: 42%;
padding: 0px;
height: 120px;
}
.column2 {
float: left;
width: 58%;
padding: 3.5em 0em 0em 0em;
height: 120px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
}
From you custom CSS also remove the following from the start and end part:
<style>
</style>
No need for those style tags because it was added automatically when parsing CSS.
Do the same for content $159 on the next column.
Let’s fixed that major main structure issue first before going to the next.
Hope this helps.
Cool. Okay, I’ve completed those items. What next?
Hi,
I checked and there are still html syntax error. Please change this
<div class="row">
<div class="column1" style="font-size:5.4em;">
<p> $159 </p>
</div>
<div class="row">
<div class="column2" style="font-size:1em;">
<p>Per Month <br /> No annual commitment</p>
</div>
</div>
to
<div class="row">
<div class="column1" style="font-size:5.4em;">
<p> $159 </p>
</div>
<div class="column2" style="font-size:1em;">
<p>Per Month <br /> No annual commitment</p>
</div>
</div>
Please take note of the difference in the code.
With regards to dropdown, I am not sure what you are trying to do. Maybe you trying to build an accordion?
http://demo.theme.co/integrity-1/shortcodes/accordion/
eg.
[accordion id="my-accordion"]
[accordion_item title="Account Setup (1 time $349)" parent_id="my-accordion"]
• Create Email Marketing Account <br />
• List upload <br />
• Set email display and signature info <br />
• Create email signup link and for on website <br />
• Create 'change of interest' / 'update profile' emails to confirm <br />
• Create 'forward to a friend' emails <br />
• Create 'welcome letter' for new registrants
[/accordion_item]
[accordion_item title="Campaign Design (Free for 60 days)" parent_id="my-accordion"]
• Mobile-responsive <br />
• Personalized for your business <br />
• Regularly $99 per new template <br />
• No revisions
[/accordion_item]
[accordion_item title="Campaign Execution" parent_id="my-accordion"]
• Expert entry of content & images (provided by client) <br />
• We schedule delivery of email based on best practices
[/accordion_item]
[/accordion]
Hope that helps.
Hey,
That worked great. It’s fixed. The content still overlaps the price when the screen is smaller. How can we fix that?
For the icons that when rolled over display a dropdown w/ a description of the feature…
2) How can we make it so that the window that appears when rolled over displays over top of the other elements on the page?
Hi there,
Kindly go to the section which you added those 2 price tables and click on the Customize tab and add a unique class such as pricesection. Then add the CSS code below to Pro > Launch > Theme Options > CSS:
.pricesection .x-column:first-child {
z-index: 2
}
@media (max-width: 480px) {
.pricesection .column1,
.pricesection .column2 {
float: none;
padding: 0;
}
.pricesection .column2 {
height: 70px;
}
}
Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.
Thank you.
K. All s good from what we’ve done above.
Now, when I press the ‘Add to Cart’ button the text ‘View Cart’ appears to the right of the button. How can I get rid of this?
Hi There,
I can’t seem to find the ‘Add to Cart’ button that you’re referring too, please provide us the direct link to the page and a screenshot of the issue.
Thanks,
Hello,
The button to which I am referring can be found by way of ‘Content’ > ‘Email Marketing’ and then there are two ‘Add to cart’ buttons. I’ve attached a video in a secure message above that shows what I’m talking about with the ‘view cart’ text that appears to the right of the button.
In the video, I ask a second question - Can we make a message appear (like an overlay) for a few seconds after a client has clicked the ‘Add to cart’ button that says, ‘This service has been added to your cart’? What I feel is lacking for a client who has pushed the ‘Add to cart’ button is an indication that they have been successful putting the item in their cart. That their clicking the button did something. What options do we have that could achieve that indication?
Hi,
- To get rid of
View Cart, you can add the code below inCornerstone > CSS
.em-plans .added_to_cart.wc-forward {
display:none;
}
- With regards to overlay message. Regretfully this could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.
Thanks for understanding. Take care!
Hello,
I was unable to get the css code to work. I put it into the ‘Body CSS Class(es)’ on the ‘Email Marketing’ page in Cornerstone. I also tried it in the CSS section on the ‘Email Marketing’ page in Pro. Am I putting it in the correct location? Also, the code includes, ‘.em-plans’ where do i find this? I am asking because once I have completed this page I will copy it and use it as a template for all of the other service pages. I assume I will need to change this for each of the difference service pages, is that correct?
About 2) is there a plugin that you can recommend that can do what I’m looking for? Or can you suggest some keywords that would help me search for one?
Hi there,
You shouldn’t add CSS code to Body CSS Class(es), it’s for CSS classes (class names) only.
Please add the recommended CSS codes to the suggested location, for example Cornerstone > CSS. You can get there by editing your page/post from the builder and click the CSS icon in the vertical toolbar where the save button is. If you’re planning to re-use it, then add it to your Theme Options’ CSS (same CSS icon but in Admin > X > Options)
About #2, it’s a bit complex and I don’t recall any similar plugin. It’s best to consult it to a developer for proper planning and estimates.
Thanks!
Instead of eliminating the text can we easily change what it says? Can we change it to say, “This service has been added to your cart”?