-
Posts
-
I need some help making changes to the product page. Here’s what I’m trying to achieve:
1. Change the product title to a smaller font size
2. Move the product description box so its permanently below the product image
3. Change the price font on the product page only without changing the font size for all the category listings
4. Change the quantity -/+ button to a drop down menu
5. Centre category product titles for recommended productsCurrent layout
http://www.theunderfloorheatingcompany.co.uk/product/heatmiser-neostat-programmable-thermostat-silver/What I’m trying to achieve
http://www.heatmisershop.co.uk/heatmiser-neostat-programmable-thermostat-platinum-silver/Any help is greatly appreciated!
Hey pachanights!
1 & 2 & 3 & 5 – Please add following code to Quick CSS in Enfold theme options under General Styling tab
.single h1.product_title.entry-title { font-size: 24px; } .single-product-summary { clear: both; } .single p.price { font-family: georgia; } .single-product #av_section_1 .inner_product_header { text-align: center; }4- Please add following code to Functions.php file in Appearance > Editor
function woocommerce_quantity_input() { global $product; $defaults = array( 'input_name' => 'quantity', 'input_value' => '1', 'max_value' => apply_filters( 'woocommerce_quantity_input_max', '', $product ), 'min_value' => apply_filters( 'woocommerce_quantity_input_min', '', $product ), 'step' => apply_filters( 'woocommerce_quantity_input_step', '1', $product ), 'style' => apply_filters( 'woocommerce_quantity_style', 'float:left; margin-right:10px;', $product ) ); if ( ! empty( $defaults['min_value'] ) ) $min = $defaults['min_value']; else $min = 1; if ( ! empty( $defaults['max_value'] ) ) $max = $defaults['max_value']; else $max = 20; if ( ! empty( $defaults['step'] ) ) $step = $defaults['step']; else $step = 1; $options = ''; for ( $count = $min; $count <= $max; $count = $count+$step ) { $options .= '<option value="' . $count . '">' . $count . '</option>'; } echo '<div class="quantity_select" style="' . $defaults['style'] . '"><select name="' . esc_attr( $defaults['input_name'] ) . '" title="' . _x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) . '" class="qty">' . $options . '</select></div>'; }Regards,
YigitThank you so much for your help Yigit.
Regarding no.2, what I meant to say is that I want to move the description box to below the image, but keep the product title, price, sku, quantity and add to cart button next to the image on the right. The code you gave me moved everything below the image
For no.3, I was trying to change the font size of the price on the product page only, to say 35px, not to a different font. Sorry if my explanation wasn’t clear.
Hi!
Please remove following code from Quick CSS
.single-product-summary { clear: both; } .single p.price { font-family: georgia; }and add following
.single p.price { font-size: 35px; }Please add following code to Functions.php file in Appearance > Editor
remove_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 1 ); add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );Best regards,
YigitThanks Yigit
Unfortunately the code to move the description box didn’t work properly- it moved the description box and tabs not below the image but below the suggested products, and also left the tabs showing in their original position. Unfortunately I can’t leave the code in while the site is live to show you how it looks.
Also, the code to change the price font size didn’t work. Maybe I have something in the Quick CSS causing conflict? Heres what is currently in Quick CSS
.related.products {
display: none;
}.tax-product_cat .page-thumb {
display: none;
}.avia-image-container-inner:hover .av-image-caption-overlay-center {
display: none!important;
}.image-overlay { background: transparent !important; }
div .product-sorting .sort-param-order, div .product-sorting .sort-param-sort {display: none;}
.logo {
top: 5px;
}.header-scrolled .logo {
top: 4px;
}#header .widget {
z-index: 9999;
}ul.sort-param-count{
display:none !important;
}td {
vertical-align: top;
}.my-custom-content {
float: right;
width: 40%;
top: 80px;
font-size: 25px;
font-family: helvetica;
color: #DE0E0E;
position: relative;
}.single h1.product_title.entry-title {
font-size: 24px;
}.single-product #av_section_1 .inner_product_header {
text-align: center;
}.single p.price {
font-size: 35px;
}While you’re looking, how can I make .my-custom-content responsive?
Hi!
Please change custom CSS code for price to following
.single p.price { font-size: 35px !important; }and you should be able to make your custom class responsive by adding following code to Quick CSS
.my-custom-content { width: 100% !important; }That would make it adapt to size of its container.
Regarding product page changes, do you mind creating a temporary admin login and posting it here privately?
Best regards,
YigitAdding the custom code still wont change the price size on product page, but the product page layout is my main concern. Logins added as requested
Hi,
Please update the theme to the latest version. That should fix any issues you are currently experiencing :)
To update to the latest version follow the instructions here.
If that does not help, feel free to reply here and we will take a closer look at the issue. In that case please also add your WordPress login credentials (in the “private data” field) so we can take a look at your admin area
Best regards,
AndyHey!
You can use a child theme – http://kriesi.at/documentation/enfold/using-a-child-theme/ and make the changes on functions.php file of your child theme. Or you can re-add the code to functions.php file after updating the theme
Best regards,
Yigit
- You must be logged in to reply to this topic.