Ghost text appearing
-
Can anyone explain the ghost text at the bottom of each column of the pricing table? It has the text “7 day FREE TRIAL” at the bottom of each column.
The only trigger I can think of is that I deleted a feature row, and hadn’t noticed it there before that.
It can be seen on this screenshot: https://theprogrm.com/wp-content/uploads/Screenshot-90.png
-
Hello Simon,
If you update feature row from Edit Features option, you have to also update pricing packages from Edit Columns option. It will then sync with the database. Hope it will help you.
Thanks
IftekharThanks for getting back to me, Iftekhar.
That does not make any difference. It’s fine if I tick the “Enable Caption Column” – I think it is the last caption that is repeating when this is turned off.
Is there any hack I can do to remove it before a proper fix?
Create another table copying the existed one. If the new pricing table doesn’t have any problem, then ignore the old table and use the new one. I think there might have some problem with the database when creating the pricing table. Creating a new table may solved the problem, Thanks.
I did that – manually creating a table from scratch – and the result is exactly the same.
There is a screenshot of the error (in the newly created table) here: https://theprogrm.com/wp-content/uploads/Screenshot-91.png
Below is the resultant HTML for the table section of the page.
Any other ideas??
<div id="progrm_levels-1" class="wrcpt_content wrcpt_container"> <div class="wrc_pricing_table wrcpt_row"> <style type="text/css"> div#progrm_levels-1 {width:90%} @media screen and (min-width: 1024px) { div#progrm_levels-1 div.package_details {margin-right:5px;width: 22.125%} } div#progrm_levels-1 div.package_details div.text_tooltip:hover:after, div#progrm_levels-1 div.package_details div.icon_tooltip:hover:after {width: 400px} </style> <style type="text/css"> div#progrm_levels-1 div.package_details h2.txcolor-1 {font-size: 24px;color: #ffffff;} div#progrm_levels-1 div.package_details li.color-1 {background: -moz-linear-gradient(#c2c2c2, #868686);background: -webkit-linear-gradient(#c2c2c2, #868686);background: -o-linear-gradient(#c2c2c2, #868686);background: -ms-linear-gradient(#c2c2c2, #868686);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2c2c2', endColorstr='#868686',GradientType=1);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2c2c2', endColorstr='#868686',GradientType=1);background: linear-gradient(#c2c2c2, #868686);} div#progrm_levels-1 div.package_details h1.txcolor-1 {font-size: 30px;color: #ffffff;} div#progrm_levels-1 div.package_details h1.txcolor-1 span.unit, div#progrm_levels-1 div.package_details h1.txcolor-1 span.cent {font-size: 18px} div#progrm_levels-1 div.package_details li.plan-1 {background: #727272;line-height: 120px;z-index: -1;} div#progrm_levels-1 div.package_details li.bbcolor-1 {background: #727272} div#progrm_levels-1 div.package_details li.button-1 a.action_button {background: -moz-linear-gradient(#656565, #333333);background: -webkit-linear-gradient(#656565, #333333);background: -o-linear-gradient(#656565, #333333);background: -ms-linear-gradient(#656565, #333333);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );background: linear-gradient(#656565, #333333);border:1px solid #333333;font-size: ;color: #FFFFFF;} div#progrm_levels-1 div.package_details li.button-1 a.action_button:hover {background: -moz-linear-gradient(#ea8f20, #d67b0c);background: -webkit-linear-gradient(#ea8f20, #d67b0c);background: -o-linear-gradient(#ea8f20, #d67b0c);background: -ms-linear-gradient(#ea8f20, #d67b0c);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );background: linear-gradient(#ea8f20, #d67b0c);color: #ffffff;} div#progrm_levels-1 div.package_details li.rowcolor-1 {background-color: #DFDFDF;text-align:left} div#progrm_levels-1 div.package_details li.altrowcolor-1 {background-color: #FAFAFA;text-align:left} div#progrm_levels-1 div.package_details li.ribbon_color-1 {background: -moz-linear-gradient(left, #ff5050, #CB0000);background: -webkit-linear-gradient(left, #ff5050, #CB0000);background: -o-linear-gradient(left, #ff5050, #CB0000);background: -ms-linear-gradient(left, #ff5050, #CB0000);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5050', endColorstr='#CB0000',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5050', endColorstr='#CB0000', GradientType=1);background: linear-gradient(to right, #ff5050, #CB0000);font-size: ;color: #333333} div#progrm_levels-1 div.package_details li.ribbon_color-1:before {border-color: transparent transparent transparent #CB0000;} div#progrm_levels-1 div.package_details li.ribbon_color-1:after {border-color: transparent #ff5050 transparent transparent;} </style> <div class="package_details"> <ul> <li class="pricing_table_title color-1 title_top_radius"> <h2 class="package_type txcolor-1" style="color: rgb(68, 63, 63);">Daily</h2> </li> <li class="pricing_table_plan plan-1"> <h1 class="package_plan txcolor-1" style="color: rgb(68, 63, 63);"><span class="unit">€</span><span class="price">50</span><span class="cent"></span><span class="plan">/month</span></h1> </li> <li class="feature_style_1 feature-align ftcolor-1 altrowcolor-1"> <div class="text_tooltip" title="A perfect program for athletes wanting to develop in the sport of Crossfit in the most efficient time possible">For all Crossfit athletes</div> <p><span>Designed for</span></p></li> <li class="feature_style_1 feature-align ftcolor-1 rowcolor-1"> <div class="text_tooltip" title="Six 90-120min training sessions per week">6 sessions per week</div> <p><span>Training Sessions</span></p></li> <li class="feature_style_1 feature-align ftcolor-1 altrowcolor-1"> <div class="text_tooltip" title="And email">Facebook Group support</div> <p><span>1:1 support</span></p></li> <li class="feature_style_1 feature-align ftcolor-1 rowcolor-1"> <div class="text_tooltip" title="No charges if cancelled within this period">7 day FREE TRIAL</div> <p><span>7 Day FREE TRIAL</span></p></li> <li class="pricing_table_button bbcolor-1 button-1"><a href="https://theprogrm.com/my-account/membership-checkout/?level=1&customize_changeset_uuid=3e8b90d3-4318-42ac-96a0-07d8f503098f&customize_messenger_channel=preview-1" class="action_button" target="_self">FREE TRIAL</a></li> </ul></div> <style type="text/css"> div#progrm_levels-1 div.package_details h2.txcolor-2 {font-size: 24px;color: #ffffff;} div#progrm_levels-1 div.package_details li.color-2 {background: -moz-linear-gradient(#b4b5cf, #787993);background: -webkit-linear-gradient(#b4b5cf, #787993);background: -o-linear-gradient(#b4b5cf, #787993);background: -ms-linear-gradient(#b4b5cf, #787993);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b4b5cf', endColorstr='#787993',GradientType=1);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b4b5cf', endColorstr='#787993',GradientType=1);background: linear-gradient(#b4b5cf, #787993);} div#progrm_levels-1 div.package_details h1.txcolor-2 {font-size: 30px;color: #ffffff;} div#progrm_levels-1 div.package_details h1.txcolor-2 span.unit, div#progrm_levels-1 div.package_details h1.txcolor-2 span.cent {font-size: 18px} div#progrm_levels-1 div.package_details li.plan-2 {background: #64657f;line-height: 120px;z-index: -1;} div#progrm_levels-1 div.package_details li.bbcolor-2 {background: #64657f} div#progrm_levels-1 div.package_details li.button-2 a.action_button {background: -moz-linear-gradient(#656565, #333333);background: -webkit-linear-gradient(#656565, #333333);background: -o-linear-gradient(#656565, #333333);background: -ms-linear-gradient(#656565, #333333);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );background: linear-gradient(#656565, #333333);border:1px solid #333333;font-size: ;color: #FFFFFF;} div#progrm_levels-1 div.package_details li.button-2 a.action_button:hover {background: -moz-linear-gradient(#ea8f20, #d67b0c);background: -webkit-linear-gradient(#ea8f20, #d67b0c);background: -o-linear-gradient(#ea8f20, #d67b0c);background: -ms-linear-gradient(#ea8f20, #d67b0c);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );background: linear-gradient(#ea8f20, #d67b0c);color: #ffffff;} div#progrm_levels-1 div.package_details li.rowcolor-2 {background-color: #DFDFDF;text-align:left} div#progrm_levels-1 div.package_details li.altrowcolor-2 {background-color: #FAFAFA;text-align:left} div#progrm_levels-1 div.package_details li.ribbon_color-2 {background: -moz-linear-gradient(left, #ff5050, #CB0000);background: -webkit-linear-gradient(left, #ff5050, #CB0000);background: -o-linear-gradient(left, #ff5050, #CB0000);background: -ms-linear-gradient(left, #ff5050, #CB0000);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5050', endColorstr='#CB0000',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5050', endColorstr='#CB0000', GradientType=1);background: linear-gradient(to right, #ff5050, #CB0000);font-size: ;color: #333333} div#progrm_levels-1 div.package_details li.ribbon_color-2:before {border-color: transparent transparent transparent #CB0000;} div#progrm_levels-1 div.package_details li.ribbon_color-2:after {border-color: transparent #ff5050 transparent transparent;} </style> <div class="package_details"> <ul> <li class="pricing_table_title color-2 title_top_radius"> <h2 class="package_type txcolor-2" style="color: rgb(68, 63, 63);">Elite</h2> </li> <li class="pricing_table_plan plan-2"> <h1 class="package_plan txcolor-2" style="color: rgb(68, 63, 63);"><span class="unit">€</span><span class="price">75</span><span class="cent"></span><span class="plan">/month</span></h1> </li> <li class="feature_style_1 feature-align ftcolor-2 altrowcolor-2"> <div class="text_tooltip" title="A perfect program for athletes wanting to develop in the sport of Crossfit in the most efficient time possible">For advanced Crossfit athletes</div> <p><span>Designed for</span></p></li> <li class="feature_style_1 feature-align ftcolor-2 rowcolor-2"> <div class="text_tooltip" title="Nine to twelve 90-120min training sessions per week">9-12 sessions per week</div> <p><span>Training Sessions</span></p></li> <li class="feature_style_1 feature-align ftcolor-2 altrowcolor-2"> <div class="text_tooltip" title="And email">Facebook Group support</div> <p><span>1:1 support</span></p></li> <li class="feature_style_1 feature-align ftcolor-2 rowcolor-2"> <div class="text_tooltip" title="No charges if cancelled within this period">7 day FREE TRIAL</div> <p><span>7 Day FREE TRIAL</span></p></li> <li class="pricing_table_button bbcolor-2 button-2"><a href="https://theprogrm.com/my-account/membership-checkout/?level=2&customize_changeset_uuid=3e8b90d3-4318-42ac-96a0-07d8f503098f&customize_messenger_channel=preview-1" class="action_button" target="_self">FREE TRIAL</a></li> </ul></div> <style type="text/css"> div#progrm_levels-1 div.package_details h2.txcolor-3 {font-size: 24px;color: #ffffff;} div#progrm_levels-1 div.package_details li.color-3 {background: -moz-linear-gradient(#b5ceb4, #799278);background: -webkit-linear-gradient(#b5ceb4, #799278);background: -o-linear-gradient(#b5ceb4, #799278);background: -ms-linear-gradient(#b5ceb4, #799278);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5ceb4', endColorstr='#799278',GradientType=1);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5ceb4', endColorstr='#799278',GradientType=1);background: linear-gradient(#b5ceb4, #799278);} div#progrm_levels-1 div.package_details h1.txcolor-3 {font-size: 30px;color: #ffffff;} div#progrm_levels-1 div.package_details h1.txcolor-3 span.unit, div#progrm_levels-1 div.package_details h1.txcolor-3 span.cent {font-size: 18px} div#progrm_levels-1 div.package_details li.plan-3 {background: #657e64;line-height: 120px;z-index: -1;} div#progrm_levels-1 div.package_details li.bbcolor-3 {background: #657e64} div#progrm_levels-1 div.package_details li.button-3 a.action_button {background: -moz-linear-gradient(#656565, #333333);background: -webkit-linear-gradient(#656565, #333333);background: -o-linear-gradient(#656565, #333333);background: -ms-linear-gradient(#656565, #333333);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );background: linear-gradient(#656565, #333333);border:1px solid #333333;font-size: ;color: #FFFFFF;} div#progrm_levels-1 div.package_details li.button-3 a.action_button:hover {background: -moz-linear-gradient(#ea8f20, #d67b0c);background: -webkit-linear-gradient(#ea8f20, #d67b0c);background: -o-linear-gradient(#ea8f20, #d67b0c);background: -ms-linear-gradient(#ea8f20, #d67b0c);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );background: linear-gradient(#ea8f20, #d67b0c);color: #ffffff;} div#progrm_levels-1 div.package_details li.rowcolor-3 {background-color: #DFDFDF;text-align:left} div#progrm_levels-1 div.package_details li.altrowcolor-3 {background-color: #FAFAFA;text-align:left} div#progrm_levels-1 div.package_details li.ribbon_color-3 {background: -moz-linear-gradient(left, #ff5050, #CB0000);background: -webkit-linear-gradient(left, #ff5050, #CB0000);background: -o-linear-gradient(left, #ff5050, #CB0000);background: -ms-linear-gradient(left, #ff5050, #CB0000);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5050', endColorstr='#CB0000',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5050', endColorstr='#CB0000', GradientType=1);background: linear-gradient(to right, #ff5050, #CB0000);font-size: ;color: #333333} div#progrm_levels-1 div.package_details li.ribbon_color-3:before {border-color: transparent transparent transparent #CB0000;} div#progrm_levels-1 div.package_details li.ribbon_color-3:after {border-color: transparent #ff5050 transparent transparent;} </style> <div class="package_details"> <ul> <li class="pricing_table_title color-3 title_top_radius"> <h2 class="package_type txcolor-3" style="color: rgb(68, 63, 63);">Coach</h2> </li> <li class="pricing_table_plan plan-3"> <h1 class="package_plan txcolor-3" style="color: rgb(68, 63, 63);"><span class="unit">€</span><span class="price">300</span><span class="cent"></span><span class="plan">/month</span></h1> </li> <li class="feature_style_1 feature-align ftcolor-3 altrowcolor-3"> <div class="text_tooltip" title="That demand 1:1 tailored coaching">For competition level athletes</div> <p><span>Designed for</span></p></li> <li class="feature_style_1 feature-align ftcolor-3 rowcolor-3"> <div class="text_tooltip" title="We discuss and agree at the start of your subscription, then regularly review">Sessions as required</div> <p><span>Training Sessions</span></p></li> <li class="feature_style_1 feature-align ftcolor-3 altrowcolor-3"> <div class="text_tooltip" title="Access to a personal coach when needed">Personal 1:1 support</div> <p><span>1:1 support</span></p></li> <li class="feature_style_1 feature-align ftcolor-3 rowcolor-3"> <div class="text_tooltip" title="No, but try Daily or Elite first">No trial available</div> <p><span>7 Day FREE TRIAL</span></p></li> <li class="pricing_table_button bbcolor-3 button-3"><a href="https://theprogrm.com/my-account/membership-checkout/?level=4&customize_changeset_uuid=3e8b90d3-4318-42ac-96a0-07d8f503098f&customize_messenger_channel=preview-1" class="action_button" target="_self">Sign Up</a></li> </ul></div> <style type="text/css"> div#progrm_levels-1 div.package_details h2.txcolor-4 {font-size: 24px;color: #ffffff;} div#progrm_levels-1 div.package_details li.color-4 {background: -moz-linear-gradient(#ccb4ce, #907892);background: -webkit-linear-gradient(#ccb4ce, #907892);background: -o-linear-gradient(#ccb4ce, #907892);background: -ms-linear-gradient(#ccb4ce, #907892);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccb4ce', endColorstr='#907892',GradientType=1);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccb4ce', endColorstr='#907892',GradientType=1);background: linear-gradient(#ccb4ce, #907892);} div#progrm_levels-1 div.package_details h1.txcolor-4 {font-size: 30px;color: #ffffff;} div#progrm_levels-1 div.package_details h1.txcolor-4 span.unit, div#progrm_levels-1 div.package_details h1.txcolor-4 span.cent {font-size: 18px} div#progrm_levels-1 div.package_details li.plan-4 {background: #7c647e;line-height: 120px;z-index: -1;} div#progrm_levels-1 div.package_details li.bbcolor-4 {background: #7c647e} div#progrm_levels-1 div.package_details li.button-4 a.action_button {background: -moz-linear-gradient(#656565, #333333);background: -webkit-linear-gradient(#656565, #333333);background: -o-linear-gradient(#656565, #333333);background: -ms-linear-gradient(#656565, #333333);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#333333',GradientType=1 );background: linear-gradient(#656565, #333333);border:1px solid #333333;font-size: ;color: #FFFFFF;} div#progrm_levels-1 div.package_details li.button-4 a.action_button:hover {background: -moz-linear-gradient(#ea8f20, #d67b0c);background: -webkit-linear-gradient(#ea8f20, #d67b0c);background: -o-linear-gradient(#ea8f20, #d67b0c);background: -ms-linear-gradient(#ea8f20, #d67b0c);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8f20', endColorstr='#d67b0c',GradientType=1 );background: linear-gradient(#ea8f20, #d67b0c);color: #ffffff;} div#progrm_levels-1 div.package_details li.rowcolor-4 {background-color: #DFDFDF;text-align:left} div#progrm_levels-1 div.package_details li.altrowcolor-4 {background-color: #FAFAFA;text-align:left} div#progrm_levels-1 div.package_details li.ribbon_color-4 {background: -moz-linear-gradient(left, #ff5050, #CB0000);background: -webkit-linear-gradient(left, #ff5050, #CB0000);background: -o-linear-gradient(left, #ff5050, #CB0000);background: -ms-linear-gradient(left, #ff5050, #CB0000);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5050', endColorstr='#CB0000',GradientType=1 );-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5050', endColorstr='#CB0000', GradientType=1);background: linear-gradient(to right, #ff5050, #CB0000);font-size: ;color: #333333} div#progrm_levels-1 div.package_details li.ribbon_color-4:before {border-color: transparent transparent transparent #CB0000;} div#progrm_levels-1 div.package_details li.ribbon_color-4:after {border-color: transparent #ff5050 transparent transparent;} </style> <div class="package_details"> <ul> <li class="pricing_table_title color-4 title_top_radius"> <h2 class="package_type txcolor-4" style="color: rgb(68, 63, 63);">Box</h2> </li> <li class="pricing_table_plan plan-4"> <h1 class="package_plan txcolor-4" style="color: rgb(68, 63, 63);"><span class="unit">€</span><span class="price">300</span><span class="cent"></span><span class="plan">/month</span></h1> </li> <li class="feature_style_1 feature-align ftcolor-4 altrowcolor-4"> <div class="text_tooltip" title="And for a Box coach to distribute">For athlete Boxes</div> <p><span>Designed for</span></p></li> <li class="feature_style_1 feature-align ftcolor-4 rowcolor-4"> <div class="text_tooltip" title="We'll work with you for the needs of your Box">Sessions as agreed</div> <p><span>Training Sessions</span></p></li> <li class="feature_style_1 feature-align ftcolor-4 altrowcolor-4"> <div class="text_tooltip" title="Support for the Box coach whenever needed">Support for Box owners</div> <p><span>1:1 support</span></p></li> <li class="feature_style_1 feature-align ftcolor-4 rowcolor-4"> <div class="text_tooltip" title="No, but try Daily or Elite first">No trial available</div> <p><span>7 Day FREE TRIAL</span></p></li> <li class="pricing_table_button bbcolor-4 button-4"><a href="https://theprogrm.com/my-account/membership-checkout/?level=3&customize_changeset_uuid=3e8b90d3-4318-42ac-96a0-07d8f503098f&customize_messenger_channel=preview-1" class="action_button" target="_self">Sign Up</a></li> </ul></div> <p></p></div> <p></p></div>
Just to say I have hidden the problem for now by adding the following custom css:
.feature_style_1 p { display: none; }
Would be better if it could be fixed though! I’m sure the ‘p’ tag will be needed sometime in the table.
The plugin didn’t use any P tag before SPAN tag. Somehow it is generating by your theme function. Below is an example of how the plugin code has been written:
<div class="text_tooltip" title="<?php echo $f_tips; ?>"><?php echo $f_value; ?></div> <?php if($packageCombine['ftcap'] != "yes") { ?> <span><?php echo $package_feature['fitem'.$i]; ?></span> <?php } ?>
See, there is no P tag. In this case, your solution would be fine.
Thanks
- The topic ‘Ghost text appearing’ is closed to new replies.