Best way to add html product box with lots of divs to wordpress article?

[Poplanu]

So I've built (read: copied) a product box in HTML and CSS. Wirecutter-style, image + title + description + link.

Currently, I'm concatenating all the tags in Excel and pasting them straight into Wordpress text editor. The problem is that editing gets messy. I sometimes end up deleting a "</div>" tag at the end of the box and whatnot.

Is there a better way?

I'm using the classical editor and don't want to switch to Gutenberg just yet.

Thanks.

 

[Ryuzaki]

You could create a shortcodes.php file in your theme and then add this to your functions.php: require_once('shortcodes.php');

Then within the shortcodes you could paste your boxes so they only appear in one spot, each one being a shortcode. Then use the shortcodes in the content.

If you want to take it a step further, you could create a complicated shortcode like [shortcode image="" title="" description="" link=""] and only have one shortcode.

 

[Poplanu]

If you want to take it a step further, you could create a complicated shortcode like [shortcode image="" title="" description="" link=""] and only have one shortcode.

Didn't know these existed, it's exactly what I was looking for, thanks! Custom shortcode mastery here I come

 

[Olov]

@Poplanu Where did you copy the product box?

I am trying to piff up my sites with CSS at the moment, but struggling to find nice designs. Wirecutter is one of the sites that I have tried to copy a little bit of design ideas from, but haven't found any good boxes, buttons that resembles.

If you have a link where you've found the codes I would be very grateful. :-)

 

[Poplanu]

Hey man, I just copied the base HTML and CSS from developer tools and then played around with it until it worked. https://petlifetoday.com/best-wireless-dog-fences/ has a nice simple one using CSS flexbox and I'd recommend starting from that one (TheWirecutter uses some cryptic HTML divs in theirs making it hard to copy).

There are some tricky things, but if you copy it line by line you should be fine. I might also write up a bare-bones version on jsfiddle or something tomorrow, since I also didn't find this anywhere online.

 

[Luxalpha]

I might also write up a bare-bones version on jsfiddle or something tomorrow, since I also didn't find this anywhere online.

Did you end up writing that code? Would be super helpful

 

[BCN]

I use Gutenberg and custom blocks, then adding products as CPT.

Moderator Note: Don't link to images, embed them.

Then just render them in the theme

[.....]
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  <?php $images = get_field('images', get_the_ID()); ?>
  <h2><?php echo $header_count . ". " . get_field('product_name', get_the_ID()); ?></h2>
  <img src="<?= $images[0]["sizes"]["large"]?>">
  <?php echo get_field( 'short_description', get_the_ID() ); ?>
  <div class="wp-block-button">
      <a class="wp-block-button__link" href=" [.....]

If you don;t like Gutenberg, you can do the same with shortcodes.

No matter what route you go, do yourself a favour and keep the data in a CPT. Then you won't have to re-write it all over the place, and you have the added benefit of easily being able to render detail pages for each product.

We do this for all kinds of stuff. Travel, business listings, office spaces, credit cards, loans, and we can pull the data via API and do some fancy JS stuff for calculators and filtering on the frontend.

 

[Poplanu]

Did you end up writing that code? Would be super helpful

Hey yo, took a bit longer since I spent the entire weekend copy-pasting these. But here is a version that works with Wordpress default theme, so I figure that it'll work with all the other ones as well.

This is the HTML code for the post:

<div class="product-box-single">
    <span class="product-box-ribbon">
        Top Pick
    </span>
    <div class="product-box-half">
        <div class="image-wrapper">
            <a rel="nofollow noopener" target="_blank" href="https://en.bcdn.biz/Images/2018/6/12/27565ee3-ffc0-4a4d-af63-ce8731b65f26.jpg"><img class="aligncenter" title="cute kitty" src="https://en.bcdn.biz/Images/2018/6/12/27565ee3-ffc0-4a4d-af63-ce8731b65f26.jpg" alt="buy now"></a></div>
        </div>
    <div class="product-box-half">
        <div class="product-box-title">
            Cute Kitty
        </div>
        <div class="product-box-description">
        Time spent with cats is never wasted. A meow massages the heart.
        </div>
        <div class="product-box-button">
            <a class="button" rel="nofollow noopener" target="_blank" href="https://en.bcdn.biz/Images/2018/6/12/27565ee3-ffc0-4a4d-af63-ce8731b65f26.jpg">Check Price On Catamazon</a>
        </div>
    </div>
</div>

And paste this into the Custom CSS section of your site:

.product-box-single{
    position:relative;
    border:4px solid #d9d9d9;
    padding:30px 15px 20px;
    margin-bottom:30px;
    margin-top:40px;
    font-size:15px;
    line-height:1.4em;
    box-shadow:0 0 5px 0 #d9d9d9;
    display:flex;
    align-items: center;
  justify-content: center;
}

.product-box-ribbon{
    position:absolute;
    font-family: Serif;
    top:-29px;
    left: -14px;
    background-color:#2b75bc;
    font-size:26px;
    font-weight:bold;
    line-height:1.25;
    padding: 9px 16px 8px 14px;
    color:#fff;
    box-shadow:2px 2px 2px 0 rgba(0,0,0,.14);
}

.product-box-single >p:empty{
    margin:0;
    padding:0;
}

.product-box-ribbon:after{
    content: " ";
  display: block;
  position: absolute;
  left: -10px;
  bottom: -7px;
  border-top: 0 inset transparent;
  border-right: 10px solid #133091;
  border-bottom: 7px inset transparent;
  border-left: 10px inset transparent;
}

.product-box-half{
    flex:1;
    justify-content:center;
    margin:5px;
}

.product-box-title{
    font-weight:bold;
    font-size:18px;
    margin-bottom:5px;
}

.product-box-image-wrapper{
    clear:both;
    position:relative;
}

.product-box-description{
    font-size:15px;
}

.product-box-button .button{
  font-size:16px;
    width:100%;
    text-align:center;
    margin-top:10px;
    padding:5px;
  border-radius:5px;
  color: white;
    font-weight:normal;
  }

@media only screen and (max-width: 760px) {
   
.product-box-single{
        flex-direction:column;
    }
    .product-box-half{
        width:100%;
    }
}

The end result should be something like this on desktop:

Mobile:

Tablet:

And then just play around with the CSS settings until you have the look that you want. Good luck

 

[Luxalpha]

Wow. Super helpful, thank you. Going to try it out tonight!