drop down list order issues

Hello,

I have 2 problems with drop down list, could you advise:

1) options are not list in order

2) missing attribute label for the drop down box

Thank you.

Regards,
Alex

Attachments:

You must be logged in to view attached files.

Sorry I have one more question, how to also make the drop down box smaller? Thank you.

Hello,

Please clarify: do you want to reduce the width? If so provide your site admin access.

The height depends on the quantity of options

Best regards

Hello,

kindly advise on the below questions.

1) options are not list in order

2) missing attribute label for the drop down box

3) how to also make the drop down box smaller? Yes the width.

my website admin is below. Thank you.

Hi,

I fixed the first issue only, could you advise on the remaining 2 issues:

2) missing attribute label for the drop down box

3) how to also make the drop down box smaller? Yes the width.

Thank you.

Regards,
Alex

Hello,

1. You should put the order of attributes in Products > Attributes > (name of attributes)

2. Add this CSS to Theme Settings > Custom CSS

/* Visible LABLE */

div.product-design-alt .variations td.label {
   display:table-cell;
}

div.product-design-alt .variations tr {
         display: flex;
  flex-direction: column;
}

div.product-design-alt .variations .label {
   margin-bottom:10px;
}

div.product-design-alt .variations label {
   margin-right:0;
}

3.

/* change SIZE */

div.product-design-alt .variations td.value select {
  max-width: 200px; /* change width */
       height: 30px; /* change height */
}

Best Regards

Hi Elise,

Thank you for you help, I have still some problems below, could you assist:

1. How to remove the space for first label, appear the same accross my pages

2. Can I shift label to beside the dropdownbox

3. Possible to align dropdown box values to center instead of left

4. Can I only show label for dropdown box and not for color swatch and label swatch?

Regards,
Alex

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to Theme Settings > Custom CSS:

@media (max-width: 1024px) {
	div.woodmart-show-sidebar-btn {
			position: fixed;
			top: 30%;
			left: 0;
			z-index: 30;
			height:50px;
			width:50px;
			justify-content: center;
			-webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
			box-shadow: 0 0 3px rgba(0,0,0,.15);
			background-color:white;
			font-size: 16px;
			font-weight: 400;
	}

	.woodmart-show-sidebar-btn:before {
		content: "\f115";
		font-family: "woodmart-font";
	}

	.woodmart-show-sidebar-btn span {
		display:none!important;
	}
}

Best Regards

Hi,

Thank you for your response but my theme is Basel not Woodmart, I did not see any changes in my website after applying the codes?

Regards,
Alex

Sorry, our mistake if you want shift label to left side and remove space try to replace the previous code

div.product-design-alt .variations td.label {
   display:table-cell;
}

div.product-design-alt .variations tr {
         display: flex;
  flex-direction: column;
}

div.product-design-alt .variations .label {
   margin-bottom:10px;
}

div.product-design-alt .variations label {
   margin-right:0;
}

with the following code

div.product-design-alt .variations tr {
  display: flex;
  flex-direction: row;
	align-items: center;
  justify-content: center;
}

div.product-design-alt .variations tr:not(:last-child) {
	margin-bottom:20px;
}

div.product-design-alt .variations td.label {
   	display:table-cell;
		padding-bottom:0;
		margin-bottom:0;
	margin-right:10px;
}

div.single-product-content .variations td.value {
	width:auto;
	padding-bottom:0;
}

div.product-design-alt .variations .label {
   margin-bottom:10px;
}

div.product-design-alt .variations label {
   margin-right:0;
}

4. It is not possible, by default drop down box has no alignment value.

[Author]

Posts