WooCommerce Product Fields Squashed

Viewed 26

I'm trying to help redo the way products are ordered on this page and am completely stuck on how to get the top set (digital) to visually match the bottom set (print).

There are a lot of conflicting files, plugins etc which I think may be interfering with the CSS on the product page.

Have been trawling through various CSS files and for the life of me cannot figure this out. Can you help?

See link, image, and code below!

https://jetphoto.makely.uk/photos/university-graduations/2021-graduations/churchill-college-2021-graduations/july-graduation-portraits-churchill-college-2021-graduations/21ch50/21ch50-17/

Plugin CSS:

    .single-product .elementor form.cart .woocommerce-variation-add-to-cart,
.single-product .elementor form.cart:not(.grouped_form):not(.variations_form) {
    display: block !important
}

.wapf-hide {
    display: none !important
}

.wapf-wrapper {
    margin-left: -5px;
    width: 100%
}

.wapf-field-group,
.wapf-section {
    display: flex;
    flex-wrap: wrap
}

.wapf-field-container {
    padding: 0 5px 15px 5px;
    box-sizing: border-box
}

.wapf-clone-title {
    margin: 15px 0;
    padding-left: 5px;
    width: 100%
}

.wapf-field-label.wapf--above {
    margin-bottom: 10px
}

.wapf-field-description {
    font-size: 85%;
    opacity: .8;
    padding: 5px 0 0 0;
    margin: 0
}

.wapf-field-input label[for] {
    cursor: pointer
}

.wapf-field-input input[type=email],
.wapf-field-input input[type=number],
.wapf-field-input input[type=text],
.wapf-field-input input[type=url],
.wapf-field-input select,
.wapf-field-input textarea {
    width: 100%;
    box-sizing: border-box
}

.wapf-field-input input[type=checkbox],
.wapf-field-input input[type=radio] {
    float: left;
    margin-top: 5px
}

.wapf-input-label {
    font-weight: 400
}

.wapf-label-text {
    padding-left: 10px
}

.wapf-pricing-hint {
    opacity: .7
}

.wapf-checkable {
    clear: both
}

.wapf-swatch {
    box-sizing: border-box;
    cursor: pointer;
    position: relative
}

.wapf-swatch input[type=checkbox],
.wapf-swatch input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.wapf-swatch img {
    max-width: 100%
}

.wapf--circle {
    border-radius: 50%
}

.wapf--rounded {
    border-radius: 4px
}

.wapf-swatch-wrapper {
    display: flex;
    flex-wrap: wrap
}

.wapf-swatch--image {
    border: 2px solid transparent;
    text-align: center;
    transition: all .1s
}

.wapf-swatch--image.wapf-checked {
    border-color: #353c4e
}

.wapf-swatch--image img {
    vertical-align: bottom
}

.wapf-swatch-label {
    text-align: center;
    padding: 4px
}

@supports (display:grid) {
    .wapf-field-container .wapf-swatch--image {
        width: 100%
    }
}

.wapf-image-swatch-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--wapf-cols), 1fr);
    grid-auto-rows: auto;
    grid-gap: 10px
}

@media all and (max-width:900px) {
    .wapf-image-swatch-wrapper {
        grid-template-columns: repeat(var(--wapf-cols-t), 1fr)
    }
}

@media all and (max-width:768px) {
    .wapf-image-swatch-wrapper {
        grid-template-columns: repeat(var(--wapf-cols-m), 1fr)
    }
}

.wapf-swatch--color {
    margin: 0 15px 15px 0;
    position: relative;
    transition: all .1s
}

.wapf-swatch--color .wapf-color {
    margin: auto
}

.wapf-swatch--color.wapf-checked .wapf-color {
    border: 3px solid #fff;
    color: #353c4e;
    box-shadow: 0 0 0 2px
}

.wapf-swatch--text {
    padding: 7px 11px;
    margin: 0 15px 15px 0;
    border-radius: 4px;
    border: 1px solid #ccc
}

.wapf-swatch--text:hover {
    border-color: #353c4e
}

.wapf-swatch--text.wapf-checked {
    border-color: #353c4e;
    background: #353c4e;
    color: #fff
}

.wapf-product-totals {
    display: none;
    width: 100%
}

.wapf-total {
    margin: 0;
    padding: 0
}

.wapf-product-totals .wapf--inner {
    padding: 20px 0
}

.wapf-product-totals .wapf--inner>div {
    padding-bottom: 10px;
    clear: both
}

.wapf-product-totals .wapf--inner>div:last-child {
    padding-bottom: 0
}

.wapf-product-totals div span:first-child {
    font-weight: 700
}

.wapf-product-totals div span:last-child {
    float: right
}

.wapf-ttp {
    padding: 7px 15px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 9;
    transition: .15s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #353c4e;
    color: #353c4e
}

.wapf-ttp span {
    color: #fff
}

.wapf-ttp:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: -9px;
    border: 5px solid transparent;
    border-top-color: currentColor
}

.wapf-swatch:hover .wapf-ttp {
    opacity: 1;
    transform: translate(-50%, -10px);
    visibility: visible
}

Theme css file: https://drive.google.com/file/d/19Kcu-elkGHKjQQeU_e3yFiV7p4gXoDsE/view?usp=sharing

0 Answers
Related