How to Create a Product Page using Meta Box Plugin

2021-10-06T19:45:30+07:00

Is there a way to make product attributes user-selectable on front-end and display product image based on user selection of attributes? Like to show M or F design of T-shirt based on gender selection, and further to show variants of that design with "long" or "short" sleeve?

Reply

2021-10-12T12:53:15+07:00

Hi,

In the scope of this article, the product page is a page that introduces the product info that is fill/set on the backend, just a static page. It does not work like a WooCommerce product page that shows the attributes, different images and adds them to the cart.

2023-03-16T14:16:44+07:00

how can i edit the review section of product page

Reply

Field type	Product's information
Number	Price / Car Year / Max Passengers
Select	Fuel / Gearbox / Doors
Text	Fuel Usage / Engine Capacity / Max Luggage / Mileage
Image Advanced	Car Gallery

Parameter	Description
`size`	Size for the images to display. Default is `thumbnail`
limit	Limit the number of images

	<?php
	add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
	function your_prefix_register_meta_boxes( $meta_boxes ) {
	$meta_boxes[] = array (
	'title' => 'Car Rental',
	'id' => 'car-rental',
	'post_types' => array(
	0 => 'car-rental',
	),
	'context' => 'normal',
	'priority' => 'high',
	'fields' => array(
	array (
	'id' => 'price',
	'type' => 'number',
	'name' => 'Rental price',
	'required' => 1,
	'prepend' => '$',
	),
	array (
	'id' => 'car_year',
	'type' => 'number',
	'name' => 'Car Year',
	'required' => 1,
	),
	array (
	'id' => 'max_passengers',
	'type' => 'number',
	'name' => 'Max passengers',
	'required' => 1,
	),
	array (
	'id' => 'fuel',
	'name' => 'Fuel',
	'type' => 'select',
	'placeholder' => 'Select an Item',
	'options' => array(
	'Gasoline' => 'Gasoline',
	'Petrol' => 'Petrol',
	'Electricity' => 'Electricity',
	),
	'required' => 1,
	),
	array (
	'id' => 'door',
	'name' => 'Door',
	'type' => 'select',
	'placeholder' => 'Select an Item',
	'options' => array(
	2 => '2',
	4 => '4',
	5 => '5',
	),
	'required' => 1,
	),
	array (
	'id' => 'gearbox',
	'name' => 'Gearbox',
	'type' => 'select',
	'placeholder' => 'Select an Item',
	'options' => array(
	'Tiptronic' => 'Tiptronic',
	'Manuatic' => 'Manuatic',
	),
	'required' => 1,
	),
	array (
	'id' => 'fuel_usage',
	'type' => 'text',
	'name' => 'Fuel Usage',
	'desc' => 'Ex: 101/100km',
	),
	array (
	'id' => 'engine_capacity',
	'type' => 'text',
	'name' => 'Engine capacity',
	'desc' => 'Ex: 2500 cc',
	),
	array (
	'id' => 'max_luggage',
	'type' => 'text',
	'name' => 'Max luggage',
	),
	array (
	'id' => 'mileage',
	'type' => 'text',
	'name' => 'Mileage',
	'desc' => 'Ex: 500km or Unlimited',
	),
	),
	);
	return $meta_boxes;
	}

	add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes_2' );
	function your_prefix_register_meta_boxes_2( $meta_boxes ) {
	$meta_boxes[] = array (
	'title' => 'Car rental - Side',
	'id' => 'car-rental-side',
	'post_types' => array(
	0 => 'car-rental',
	),
	'context' => 'side',
	'priority' => 'low',
	'fields' => array(
	array (
	'id' => 'car_gallery',
	'type' => 'image_advanced',
	'name' => 'Car gallery',
	'force_delete' => 1,
	'max_file_uploads' => 7,
	'image_size' => 'post-thumbnail',
	'max_status' => true,
	),
	),
	);
	return $meta_boxes;
	}

	<div class="page-wrapper">
	<div class="product-gallery--columns-4 images" data-columns="4">
	<figure class="product-gallery__wrapper">
	<a href="<?php echo get_the_post_thumbnail('full'); ?>">
	<img src="<?php echo get_the_post_thumbnail('full'); ?>" alt="<?php the_title(); ?>">
	</a>
	<div class="thumbnails owl-carousel owl-loaded owl-drag">
	<div class="owl-stage-outer">
	<div class="owl-stage">
	<div class="owl-item">
	<?php
	$gallery = rwmb_meta( 'car_gallery', array( 'size' => 'thumbnail', 'limit' => '5' ) );
	foreach ( $gallery as $img ) {
	echo '<div class="item"><a href="'. $img['full_url']. '"><img src ="'.$img['url']. '"></a></div>';
	}
	?>
	</div>
	</div>
	</div>
	</div>
	</figure>
	</div>
	<div class="summary entry-summary">
	<div class="price">
	<span class="amount">
	<span class="Price-amount amount">
	<span class="Price-currencySymbol">$</span><?php echo $price = rwmb_meta('price'); ?>
	</span>
	</span>
	<span class="label">/ Day</span>
	</div>

	<div class="product-details__short-description">
	<p><?php the_excerpt(); ?></p>
	</div>
	<ul class="features">
	<li> <label>Car year: </label> <span><?php echo $car_year = rwmb_meta('car_year'); ?></span></li>
	<li> <label>Fuel: </label> <span><?php echo $fuel = rwmb_meta('fuel'); ?></span></li>
	<li> <label>Gearbox: </label> <span><?php echo $gearbox = rwmb_meta('gearbox'); ?></span></li>
	<li> <label>Fuel usage: </label> <span><?php echo $fuel_u = rwmb_meta('fuel_usage'); ?></span></li>
	<li> <label>Max passengers: </label> <span><?php echo $max_passengers = rwmb_meta('max_passengers'); ?></span></li>
	<li> <label>Engine capacity: </label> <span><?php echo $engine_capacity = rwmb_meta('engine_capacity'); ?></span></li>
	<li> <label>Max luggage: </label> <span><?php echo $max_luggage = rwmb_meta('max_luggage'); ?></span></li>
	<li> <label>Doors: </label> <span><?php echo $door = rwmb_meta('door'); ?> Doors</span></li>
	<li> <label>Mileage: </label> <span><?php echo $Mileage = rwmb_meta('Mileage'); ?></span></li>
	</ul>
	</div>
	</div>

How to Create a Product Page using Meta Box Plugin

What is the product page?

Create a product page using the Meta Box plugin

Before getting started

Step 1: Create a new custom post type

Step 2: Create custom fields for the new custom post type

Create a custom meta box

Create custom fields

Enter project details in the custom fields on the back end

Step 3: Display the product custom fields on the front end

Final words

3 thoughts on “How to Create a Product Page using Meta Box Plugin”