[Resolved] Views layout

[Author]

Posts

[SimonB1420]

hidden link

Trying to create the above link so we can start changing this

So far created this

hidden link

Missing including VAT and related products needs to be above the description

SKU also missing

Tell us what you are trying to do?

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?

[Shane]

Hi Simon,

Thank you for contacting our support forum.

I suspect that you want to customize this page with our Toolset plugin.

To add the Woocommerce product meta you need to use the shortcode below.
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-347896

For the related products you need to use this shortcode below.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-related_products

If you're already using the shortcode for the related products then you need to move it from its current location to above the product description area.

Also could you provide me with a screenshot of how the product template is built on the backend so that I can see exactly what you're doing ?

Thanks,
Shane

[SimonB1420]

Thanks, I have been able to get closer to the look now and am able to move the related products to the area my client wants.

I just need to know how to make the background area white for the images and excerpt area as the original link. Also, need to add inc vat price as the original link

See attached as requested

Original hidden link
Using the template so far hidden link

One other think if you try the blue add to quote button on the new test location the form field are not fall width. They are on the original link, any ideas on that, assume a css or your plugin change?

[Shane]

Hi Simon,

So for the white background area this is a css issue.

You need to add a class to the Layout row and then use some css to style the background color to white.

For the price with and with the VAT included you can have a look at the link below.
https://docs.woocommerce.com/document/setting-up-taxes-in-woocommerce/#section-10

Not sure why the fields are not 100% width but it is definitely a css issue.

You can resolve it with this.
.woocommerce-input-wrapper{
width: 100%;
}

Please let me know if this helps.
Thanks,
Shane

[SimonB1420]

Tried adding vat inc etc at hidden link

{price_including_tax}
{price_excluding_tax}

so tried one with[] instead and not working

[Shane]

Hi Simon,

Would you mind allowing me to have admin access to the site so that I can check if the VAT information is setup correctly?

Thanks,
Shane

[Shane]

Hi Simon,

On the original site.

Is the price including the VAT added using custom code ? Or is this some function of the default woocommerce?

Please let me know.
Thanks,
Shane

[SimonB1420]

Good question,

Yes it might be using the price.php file?

I am not sure how to check or reverse this ? how to reset to default?

[Shane]

Hi Simon,

If this was indeed a modification then the developer who made it would need to reverse it.

However I built this shortcode that you can try to see if it helps.

// Add Shortcode
function get_price_with_tax( $atts ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'product_id' => '',
		),
		$atts
	);

	if ( class_exists( 'WooCommerce' ) ) {
	  // code that requires WooCommerce
	  $product = wc_get_product($atts['product_id']);
	  return wc_price( wc_get_price_including_tax( $product ) ); 
	} else {
	  // you don't appear to have WooCommerce activated
	}

}
add_shortcode( 'get_price_with_tax', 'get_price_with_tax' );

You can add it to your functions.php file and then you can use it by doing this.
Icluding VAT [get_price_with_tax product_id='[wpv-post-id]']<br />

Please let me know if this helps.
Thanks,
Shane

[SimonB1420]

Yes check hidden link

Thanks so so much

Just need to fix the width as the menu is messed up compared to hidden link

Is it due to the container for the row or the product image being too large perhaps??

[Shane]

Hi Simon,

This is due to the class "toolback"

Its applying the white background to the entire boundary, If you add this to the second section then it should wrap to the width of the container.

Thanks,
Shane

[SimonB1420]

not sure what that means?

[Shane]

Hi Simon,

You are setting a background color with the "toolback" ID that you added to the product price and picture row. Because it was added to the Row itself, then the entire row adopts this background.

The row element is wider than the column elements that your data is in. See Screenshot

So in order for this to be the same then you need to add this to the second row as well. Or alternatively you can fix it with this.

div.woocommerce-tabs{
width: 103.5%;
    margin-left: -14px;
}

This should resolve the issue as well.

Thanks,
Shane

[SimonB1420]

added that but still wrong?

[Shane]

Hi Simon,

I thought you were making mention to this area here. See Screenshot

Where the areas weren't aligned correctly.

Could you provide a screenshot of the exact area that you are referring to ?

However this should also be a css issue.

Thanks,
Shane