New update has broken layout

The ID / data name for each checkbox field has changed. A change was implemented to accommodate people that use multiple checkboxes / radio buttons in multiple meta fields on a single page with the same data name for each option.

As you may know, the PPOM plugin automatically places the title as the data name for any input field you add. When adding multiple meta groups with options that use the same titles that got transposed into duplicate data names causes JavaScript conflicts with the selection scripts. So a change had to be made to accommodate this conflict.

In your case, one of your old checkboxes might have had a data name / ID of “embroidery_placement-left” but now has an ID of “31225-embroidery_placement-left”.

What you will need to do is change your scripts accordingly to work with the new IDs of the checkboxes by inspecting the rendered page.

In the future, if you are going to make custom scripts that interact with PPOM fields you might want to add a custom class to field and work off that instead.

I have to apologize in some way because it was my suggestion that this adjustment be implemented even though I don’t have that issue.

Hi Brozra, Thanks for replying. I changed the field names as suggested and have them in style.css in custom child theme but no matter what I try it wont override the bootstrap. Tried adding same code to ppom style css also and nothing seems to work.

Here is the code I am using, I omitted proper site address for purposes of posting:

.ppom-wrapper input#left, .ppom-wrapper input#right[type="checkbox"], .ppom-wrapper input#center[type="checkbox"], .ppom-wrapper input#back_reverse[type="checkbox"] {margin-left: -18px; border: #000000 2px solid;}

label.form-control-label[for=embroidery_placement] {float:left !important; clear: both !important;}
	
.form-check-label[for=31225-embroidery_placement-left] span.ppom-label-checkbox {position: absolute;width: 100px; margin-left: -16px; margin-top: 100px; background: rgba(22, 11, 121, 0.5); padding: 2px; color: white;font-size: smaller; text-align: center;}

.form-check-label[for=31225-embroidery_placement-right] span.ppom-label-checkbox {position: absolute;width: 100px; margin-left: -15px; margin-top: 100px; background: rgba(22, 11, 121, 0.5); padding: 2px; color: white;font-size: smaller; text-align: center;}

.form-check-label[for=31225-embroidery_placement-center] span.ppom-label-checkbox {position: absolute;width: 100px; margin-left: -15px; margin-top: 100px; background: rgba(22, 11, 121, 0.5); padding: 2px; color: white;font-size: smaller; text-align: center;}

.form-check-label[for=31225-embroidery_placement-back_reverse] span.ppom-label-checkbox {position: absolute;width: 100px; margin-left: -16px; margin-top: 100px; background: rgba(22, 11, 121, 0.5); padding: 2px; color: white; font-size: smaller; text-align: center;}

label.form-check-label[for=31225-embroidery_placement-left] {
	display: inline-block;
	float: left;
	margin-left: -190px;
	margin-top: 50px;
	width: 100px;
	height: 100px;
	cursor: pointer;	
	background-image: url("https://example.com/wp-content/uploads/2019/07/left-chest1.png");
	background-repeat: no-repeat;}

.form-check-label[for=31225-embroidery_placement-right] {
	display: inline-block;	
	margin-top: -90px;
	margin-left: -60px;
	width: 100px;
	height: 100px;
	cursor: pointer;	
	background-image: url("https://example.com/wp-content/uploads/2019/07/right-chest1.png");
	background-repeat: no-repeat;}

.form-check-label[for=31225-embroidery_placement-center] {
	display: inline-block;	
	margin-top: -90px;
	margin-left: 30px;
	width: 100px;
	height: 100px;
	cursor: pointer;	
	background-image: url("https://example.com/wp-content/uploads/2019/07/center-chest1.png");
	background-repeat: no-repeat;}

.form-check-label[for=31225-embroidery_placement-back_reverse] {
	display: inline-block;
	margin-top: -90px;	
	margin-left: 30px;
	width: 100px;
	height: 100px;
	cursor: pointer;	
	background-image: url("https://example.com/wp-content/uploads/2019/07/back-polo1.png");
	background-repeat: no-repeat;}

Is there a way to override bootstrap?

Many Thanks.

I looked at your page and it doesn’t seem that you have implemented the change on your live site yet.

Regardless, use !important after everything you want to override. Theme stylesheets get loaded after everything that is enqueued by WordPress, WooCommerce and plugins so you have to basically force it to use what you want.

Just like you have with this line of code:
label.form-control-label[for=embroidery_placement] {float:left !important; clear: both !important;}

Or, as I mentioned before, you could add a custom class to the field that you want to customize and then work based off that custom class.

That doesn’t seem to work. I have implemented the style changes and when checking with google inspect the styles are still controlled by bootstrap.

If you click on the select box and choose logo setup ￡15.00. You will see the checkboxes. None of my style changes are being implemented.

Thanks for your help.

Sorry, where would i add the custom class?

I can see that some of the CSS overrides are there but some of them aren’t. Mostly the ones that you are referencing by the custom ID directly.

It may be with how you are referencing the labels. Try putting quotation marks around the name inside the for= reference.

Example:
.form-check-label[for="31225-embroidery_placement-right"]{ ... }

If you want to use a custom class then add it to the meta field for “Embroidery Placement”. Then you can work directly off that class. Just be sure to make it something unique – e.g. embroiderypal_embroidery_placement.

Your a legend thank you. The “” worked.

Cheers! Glad I could help. I feel slightly better about suggesting that change that broke your website.

Cheers. If you like our support/plugin please rate our plugin.