product-box-plugin

Steps and Code

• go to file manager > plugins > write click and create Folder (product-box-plugin)
• then product-box-plugin > create file with name product-box-plugin.php
• then product-box-plugin > create file with name style.css

now past this full codes in the file

product-box-plugin.php

<?php
/**

• Plugin Name: Product Box Plugin
• Description: Adds a shortcode to display a product box in posts or pages.
• Version: 1.1
• Author: Your Name
  */

// Register shortcode on init
add_shortcode(‘product_box’, ‘pbp_product_box_shortcode’);

// Enqueue plugin styles
add_action(‘wp_enqueue_scripts’, ‘pbp_enqueue_styles’);
function pbp_enqueue_styles() {
wp_enqueue_style(‘pbp-styles’, plugin_dir_url(FILE) . ‘style.css’);
}

// Shortcode function
function pbp_product_box_shortcode($atts) {
$atts = shortcode_atts(array(
‘title’ => ”,
‘image’ => ”,
‘price’ => ”,
‘link’ => ”,
‘description’ => ”,
), $atts, ‘product_box’);

$title = sanitize_text_field($atts[‘title’]);
$image = esc_url($atts[‘image’]);
$price = sanitize_text_field($atts[‘price’]);
$link = esc_url($atts[‘link’]);
$description = wp_kses_post($atts[‘description’]);

ob_start();
?>
<div class=”pbp-product-box”>
<?php if (!empty($link)): ?><a href=”<?php echo $link; ?>” target=”_blank” rel=”nofollow noopener”><?php endif; ?>
<?php if (!empty($image)): ?>
<div class=”pbp-image”>
<img src=”<?php echo $image; ?>” alt=”<?php echo esc_attr($title); ?>” />
</div>
<?php endif; ?>
<div class=”pbp-content”>
<?php if (!empty($title)): ?>
<h3><?php echo esc_html($title); ?></h3>
<?php endif; ?>
<?php if (!empty($description)): ?>
<p class=”pbp-description”><?php echo $description; ?></p>
<?php endif; ?>
<?php if (!empty($price)): ?>
<p class=”pbp-price”><strong>Price:</strong> $<?php echo esc_html($price); ?></p>
<?php endif; ?>
<div class=”pbp-button-wrap”>
<span class=”pbp-button”>Buy Now</span>
</div>
</div>
<?php if (!empty($link)): ?></a><?php endif; ?>
</div>
<?php
return ob_get_clean();

}

style.css

.pbp-product-box {
background: #f9f9f9;
border-radius: 10px;
padding: 15px;
margin: 20px 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
text-decoration: none;
display: block;
color: inherit;
}

.pbp-product-box:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.pbp-image img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
margin-bottom: 10px;
}

.pbp-content h3 {
margin: 0 0 10px;
font-size: 1.2em;
}

.pbp-description {
margin-bottom: 10px;
color: #555;
}

.pbp-price {
font-weight: bold;
margin-bottom: 10px;
}

.pbp-button-wrap {
text-align: left;
}

.pbp-button {
background-color: #0073aa;
color: #fff;
padding: 8px 16px;
border-radius: 6px;
display: inline-block;
font-weight: bold;
text-align: center;
text-decoration: none;
}

Now last Activate The Plugin

After completing this step now you are ready to go and ready to create product box.

How to Display Product Box/ How to embed product box in our articles

To make product box use below written code, alway write in HTML section

[product_box 

title="Wireless Earbuds" 

image="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/510px-Flag_of_India.svg.png" 

price="49.99" 

link="https://bahor.net/similar-items-that-might-get-the-job-done/" 

description="This is not random. God says: 'Return to Me while there is still time.'"]